/**
 * Headliners.tech — tenant theme
 *
 * Design language taken from https://www.headliners.tech/
 * - Dark stage:   #0C191C
 * - Orange:       #F15A22 (primary)
 * - Cream:        #F2EEE6 (background)
 * - Club colors:  cloud #00C0F3 / dev #5F6DB3 / data&ai #F386A7
 *                 security #F15A22 / business #FFCB05 / test #6AC17B
 * - Headings:     Acumin Pro Condensed (uppercase, tight)
 * - Accents:      Acumin Pro Wide (club titles, buttons), Chivo Mono (labels, nav)
 *
 * Loaded after css/tenant-theme.css via the template theme hook (head.php).
 * Fonts live in ../fonts/ so the whole tenant stays self-contained.
 */

/* ============================================================ Fonts */
@font-face {
  font-family: "Acumin Pro";
  src: url("../fonts/AcuminPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro";
  src: url("../fonts/AcuminPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("../fonts/AcuminProCond-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("../fonts/AcuminProCond-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("../fonts/AcuminProCond-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Condensed";
  src: url("../fonts/AcuminProCond-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Wide";
  src: url("../fonts/AcuminProWide.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Wide";
  src: url("../fonts/AcuminProWide-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Acumin Pro Wide";
  src: url("../fonts/AcuminProWide-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/ChivoMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/ChivoMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ============================================================ Tokens */
:root {
  --hl-dark: #0c191c;
  --hl-dark-soft: #13252a;
  --hl-orange: #f15a22;
  --hl-orange-hover: #d94b16;
  --hl-cream: #f2eee6;
  --hl-cream-soft: #faf8f3;
  --hl-cloud: #00c0f3;
  --hl-dev: #5f6db3;
  --hl-data: #f386a7;
  --hl-security: #f15a22;
  --hl-business: #ffcb05;
  --hl-test: #6ac17b;

  --hl-font-body: "Acumin Pro", Arial, sans-serif;
  --hl-font-cond: "Acumin Pro Condensed", "Arial Narrow", Arial, sans-serif;
  --hl-font-wide: "Acumin Pro Wide", Arial, sans-serif;
  /* Type system on headliners.tech: h1/h2 are Condensed Black, h3 is Wide
     Black, body is Acumin Pro, and Chivo Mono is menu-only. */
  --hl-font-mono: "Chivo Mono", "Courier New", monospace;

  /* header title size — the band padding and the overlap both derive from it */
  --hl-hero-title-size: clamp(2.5rem, 7vw, 5.5rem);

  /* tenant-theme.css loads before this file and resets --brand-font to its
     Plus Jakarta Sans default, beating the inline tenant setting — re-declare
     it here so every var(--brand-font) consumer (job cards, navbar, buttons)
     gets the brand face */
  --brand-font: "Acumin Pro", Arial, sans-serif;
}

/* ============================================================ Base */
body {
  font-family: var(--hl-font-body);
  background: var(--hl-cream);
  color: var(--hl-dark);
}

h1, h2, .display-3, .display-4, .display-5,
.hero-title, .heading-section {
  font-family: var(--hl-font-cond) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--hl-dark);
}

/* h3 is the Wide Black tier on headliners.tech (their h3 / .club-title /
   .post-title all use it), so it is deliberately not in the rule above. */
h3 {
  font-family: var(--hl-font-wide);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--hl-dark);
}

a {
  color: var(--hl-orange);
}
a:hover {
  color: var(--hl-orange-hover);
}

::selection {
  background: var(--hl-orange);
  color: #fff;
}

/* Small uppercase tag ("YOUR TICKET TO…"). Chivo Mono is reserved for the
   menu, so this uses the brand text face. */
.hl-label {
  font-family: var(--hl-font-body);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Headings are solid throughout — no outlined words anywhere on the site.
   The .hl-outline spans stay in the markup so the wording is unchanged. */
.hl-outline {
  color: inherit;
  -webkit-text-stroke: 0;
}

/* ============================================================ Buttons */
.btn {
  border-radius: 0;
  /* !important: custom.css's button system forces --brand-font otherwise */
  font-family: var(--hl-font-body) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.btn-primary,
.btn-primary:focus {
  background: var(--hl-orange) !important;
  border-color: var(--hl-orange) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--hl-dark) !important;
  border-color: var(--hl-dark) !important;
  color: var(--hl-cream) !important;
}

.btn-secondary,
.btn-secondary:focus {
  background: var(--hl-dark) !important;
  border-color: var(--hl-dark) !important;
  color: var(--hl-cream) !important;
}
.btn-secondary:hover {
  background: var(--hl-orange) !important;
  border-color: var(--hl-orange) !important;
  color: #fff !important;
}

.btn-outline-white:hover {
  color: var(--hl-dark) !important;
}

/* ============================================================ Navbar */
#ftco-navbar,
.ftco-navbar-light,
.ftco-navbar-light.scrolled.awake {
  background: var(--hl-dark) !important;
  box-shadow: none;
}

.ftco-navbar-light .navbar-nav > .nav-item > .nav-link,
.ftco-navbar-light.scrolled .nav-link {
  font-family: var(--hl-font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hl-cream) !important;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
  color: var(--hl-orange) !important;
}

.ftco-navbar-light .navbar-brand img,
.navbar-brand img {
  max-height: 40px;
}

.ftco-navbar-light .navbar-toggler {
  color: var(--hl-cream) !important;
  font-family: var(--hl-font-mono);
  text-transform: uppercase;
}

.hl-nav-tagline {
  font-family: var(--hl-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hl-cream);
}
.hl-nav-tagline em {
  font-style: italic;
  color: var(--hl-cream);
}

.locale-dropdown {
  border-radius: 0;
  background: var(--hl-dark);
}
.locale-dropdown .dropdown-item {
  font-family: var(--hl-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--hl-cream);
}
.locale-dropdown .dropdown-item:hover,
.locale-dropdown .dropdown-item.active {
  background: var(--hl-orange);
  color: #fff;
}

/* ============================================================ Landing: hero */
/* Compact page header modelled on headliners.tech/programma. The two-line
   title straddles the band's bottom edge — first line white on the color,
   second line dark on the cream below — so the band stays short while the
   title still reads big. */
.hl-page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 32rem;
  /* bottom padding reserves the room the first title line drops into */
  padding: 8rem 0 calc(var(--hl-hero-title-size) * 0.92);
  background: var(--hl-dark); /* only shows while the photo loads */
}
.hl-page-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  pointer-events: none;
}
.hl-page-hero-inner {
  position: relative;
  z-index: 1;
}
.hl-page-hero .hl-label {
  display: block;
  color: #fff;
}

/* Pull the title up so line 1 lands on the band and line 2 on the cream */
.hl-page-hero-titlewrap {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--hl-hero-title-size) * -0.823);
}
.hl-page-hero-title {
  font-family: var(--hl-font-cond);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--hl-hero-title-size);
  line-height: 0.92;
  margin: 0 0 0 -0.045em; /* optical: flush the glyph edge with the container */
}
.hl-title-line-1 {
  color: #fff;
}
.hl-title-line-2 {
  color: var(--hl-dark);
}

@media (max-width: 767.98px) {
  .hl-page-hero {
    min-height: 18rem;
    padding-top: 6rem;
  }
}

/* Lead paragraph under the header. The title's second line already hangs
   into this space, so the section's usual 4em top padding is far too much. */
.hl-intro-section {
  padding-top: 2.25rem;
}
.hl-intro {
  font-size: 1.15rem;
  margin: 0;
  color: var(--hl-dark);
}

/* ============================================================ Landing: sections */
.site-section {
  background: var(--hl-cream);
}
.site-section.bg-light {
  background: var(--hl-cream-soft) !important;
}
.site-section.hl-section-dark {
  background: var(--hl-dark);
  color: var(--hl-cream);
}
.hl-section-dark h1, .hl-section-dark h2, .hl-section-dark h3 {
  color: var(--hl-cream);
}

.hl-section-heading {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  margin-bottom: 1rem;
}

/* Club cards */
.hl-club-card {
  /* the whole tile is the link, so the "view jobs" line is only an affordance */
  text-decoration: none;
  border-radius: 0;
  color: var(--hl-dark);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.18s ease;
}
.hl-club-card:hover {
  transform: translateY(-6px);
}
.hl-club-card img {
  width: 100%;
  height: auto;
  display: block;
}
.hl-club-card-body {
  padding: 1.25rem 1.4rem 1.6rem;
  flex: 1;
}
.hl-club-card-body h3 {
  /* their .club-title / h3: Acumin Pro Wide Black */
  font-family: var(--hl-font-wide);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
  color: #fff;
}
.hl-club-card-body p {
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0;
}
.hl-club-card:hover,
.hl-club-card:focus {
  text-decoration: none;
}
.hl-club-card .hl-club-link {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--hl-font-cond);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
/* All expertise-block text is white, whatever the club color */
.hl-club-card, .hl-club-card p { color: #fff; }
.hl-club--cloud    { background: var(--hl-cloud); }
.hl-club--dev      { background: var(--hl-dev); }
.hl-club--data-ai  { background: var(--hl-data); }
.hl-club--security { background: var(--hl-security); }
.hl-club--business { background: var(--hl-business); }
.hl-club--test     { background: var(--hl-test); }

/* Department (club) group headings on the jobs listing — same lock-up as the
   job-detail hero: outlined "/club" followed by the club name in Acumin Pro
   Wide Black. The club-colored square keeps the group scannable on cream,
   where the club color itself would be too pale for text. */
.dept-group-heading h2 {
  font-family: var(--hl-font-wide) !important;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  gap: 0.45rem;
}
.dept-group-heading h2::before {
  content: "/club";
  color: transparent;
  -webkit-text-stroke: 1.25px var(--hl-dark);
}
.dept-group-heading .dept-group-dot {
  order: -1; /* keep the color chip ahead of the generated "/club" */
  border-radius: 0; /* square, like the rest of the brand */
}

/* Values ("backstage deal") cards */
.hl-value-card {
  background: #fff;
  height: 100%;
  overflow: hidden;
}
.hl-value-card img {
  width: 100%;
  height: auto;
  display: block;
}
.hl-value-card-body {
  padding: 1.25rem 1.4rem 1.6rem;
}
.hl-value-card-body h3 {
  font-family: var(--hl-font-wide);
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--hl-dark);
}
.hl-value-card-body p {
  font-size: 0.95rem;
  margin: 0;
}

/* Programma block */
.hl-section-dark .underlined,
.hl-section-dark h2.display-5 {
  color: var(--hl-cream);
}

/* Slanted-slats image mask — the exact asset and mask rules headliners.tech
   uses on its team/programma imagery (.team-card-image in their stylesheet) */
.hl-slat-mask {
  -webkit-mask-image: url("../../../images/tenants/06-headliners/slat-mask.png");
  mask-image: url("../../../images/tenants/06-headliners/slat-mask.png");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Quote block */
.hl-quote-img {
  width: 100%;
  max-width: 260px;
}
.hl-quote-section {
  border-top: 1px solid rgba(242, 238, 230, 0.12);
}
.hl-quote {
  font-family: var(--hl-font-cond);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  text-transform: none;
  color: var(--hl-cream);
}
.hl-quote-source {
  font-family: var(--hl-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hl-cream);
}

/* CTA */
.hl-cta {
  background: var(--hl-orange) !important;
}
.hl-cta h2 {
  color: #fff;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.5rem);
}
.hl-cta .btn-secondary:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--hl-dark) !important;
}

/* ============================================================ Consistent geometry */
/* Headliners is a square-cornered brand: no border radius anywhere */
.btn, .form-control, .card, .dropdown-menu, .page-link,
.job-card-wrapper, .job-card-image, .job-card-image > img,
.job-card-image .brand-logo-wrapper, .alert, .badge, .modal-content,
.hl-club-card, .hl-value-card, .hero-input, select, .custom-select {
  border-radius: 0 !important;
}

/* Section headings: big & condensed like headliners.tech */
h2.display-5,
.underlined {
  font-size: clamp(2.4rem, 5vw, 3.75rem);
  font-weight: 900;
}
h2.display-5:not(.underlined-centered),
.underlined:not(.underlined-centered) {
  margin-left: -0.045em; /* optical left alignment, matching .hero-title */
}

/* No accent rule under headings anywhere on the site */
.underlined::after,
.underlined-orange::after,
.underlined-secondary::after,
.text-underline {
  display: none !important;
}

/* This tenant shows no published dates. The landing passes show_date=false to
   renderJobCard; the shared jobs listing renders the card itself, so the date
   is hidden here rather than adding a brand setting for it. */
.job-card-date {
  display: none;
}

/* Job card hover outline is black, not the brand orange */
.job-card-wrapper:hover,
.job-card:hover {
  border-color: var(--hl-dark) !important;
}

/* ============================================================ Jobs pages */

.job-card-wrapper {
  border-radius: 0;
  background: #fff;
}
.job-card-link .job-title {
  font-family: var(--hl-font-cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.45rem;
  color: var(--hl-dark);
}
.job-card-wrapper small {
  font-family: var(--hl-font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.job-card-wrapper .applied-info {
  background: var(--hl-test);
  color: var(--hl-dark);
}

/* Job detail hero — mirrors the club pages on headliners.tech: full
   club-color background (baked into job-heroes/{dept}.webp), text block
   bottom-left, outlined "/club {dept}" kicker over the solid job title.
   Scoped to .job-picture--dept so tenants without department heroes keep
   the shared layout. */
.job-picture h2 {
  margin-top: 0 !important;
}
/* Brand + job title stay vertically centred; the club kicker is pinned to
   the bottom edge. The container fills the hero so the kicker can anchor to
   it and keep the container's own left alignment.
   !important: job.php's inline <style> block loads after this file. */
.job-picture--dept {
  align-items: stretch !important;
}
.job-picture--dept .container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.job-picture--dept:before {
  opacity: 0 !important; /* club color must stay true, no black wash */
}

.job-picture--dept h2.job-brand {
  font-family: var(--hl-font-cond);
  font-weight: 700;
  font-size: 1rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hl-hero-fg, var(--hl-dark)) !important;
  margin-bottom: 0.1rem !important;
}

/* Pinned to the hero's bottom edge, anchored to the container so it keeps
   the same left alignment as the title (which stays vertically centred) */
/* Club lock-up from the headliners.tech club pages: "/club" outlined on its
   own line with the club name solid underneath — scaled down to sit under the
   job title rather than dominate the band. */
.job-dept-kicker {
  position: absolute;
  left: 15px; /* bootstrap .container padding */
  bottom: 1.5rem;
  /* Acumin Pro Wide, as on the club pages — the condensed face read too
     narrow next to theirs. It only ships at 700. */
  /* Same recipe as .wide-title / .stroke-title on headliners.tech: Acumin Pro
     Wide Black with the "/club" line reduced to a hairline outline. */
  font-family: var(--hl-font-wide);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-left: -0.02em;
  color: var(--hl-hero-fg, #fff);
  -webkit-text-stroke: 0;
}
.job-dept-kicker::before {
  content: "/club";
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.25px var(--hl-hero-fg, #fff);
}

.job-picture--dept h1.job-title {
  font-family: var(--hl-font-cond);
  font-weight: 900;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important;
  line-height: 1;
  margin-left: -0.045em !important;
  color: var(--hl-hero-fg, var(--hl-dark)) !important;
}

/* The hero artwork is a transparent PNG-style webp with no baked-in
   background: the club color is painted here and the artwork is `contain`ed
   at the right edge so it is never cropped, at any viewport width.
   !important overrides the inline `background-size: cover` from job.php and
   the background-position in jobs.css. */
.job-picture--dept {
  background-color: var(--hl-hero-bg, var(--hl-dark));
  /* Height-based sizing keeps the aspect intact (never cropped); the vw cap
     shrinks the artwork on narrower viewports so it cannot run into the
     title, which is width-capped below. */
  background-size: auto min(75%, 24vw) !important;
  background-position: right bottom !important;
}
/* Keep the text clear of the artwork; long titles wrap instead of colliding */
.job-picture--dept .job-brand,
.job-picture--dept .job-title,
.job-picture--dept .job-dept-kicker {
  max-width: 46%;
}
@media (max-width: 767.98px) {
  /* Narrow screens: artwork to the top-right, text stacked at the bottom in
     source order (label / outlined club / title) like the club pages */
  .job-picture--dept {
    background-size: auto 45% !important;
    background-position: right top !important;
  }
  .job-picture--dept .container {
    justify-content: flex-end;
    padding-bottom: 1.25rem;
  }
  .job-dept-kicker {
    position: static;
    margin-bottom: 0.2rem;
    -webkit-text-stroke-width: 1.5px;
  }
  /* stacked layout: text uses the full width, artwork sits above it */
  .job-picture--dept .job-brand,
  .job-picture--dept .job-title,
  .job-picture--dept .job-dept-kicker {
    max-width: 100%;
  }
}

/* Per-club color. Text is white on every club color, as on the club pages
   at headliners.tech. */
.job-picture--dept     { --hl-hero-fg: #fff; }
.job-picture--cloud    { --hl-hero-bg: var(--hl-cloud); }
.job-picture--data-ai  { --hl-hero-bg: var(--hl-data); }
.job-picture--business { --hl-hero-bg: var(--hl-business); }
.job-picture--test     { --hl-hero-bg: var(--hl-test); }
.job-picture--dev      { --hl-hero-bg: var(--hl-dev); }
.job-picture--security { --hl-hero-bg: var(--hl-security); }

/* Job description (jobs_meta.main_desc rendered inside .welcome-text):
   tighten the vertical rhythm — descriptions arrive from external sources
   (ATS / scraped) with generous paragraph spacing */
.welcome-text p {
  margin-bottom: 0.85rem;
  min-height: 0 !important; /* neutralize inline spacer min-heights */
}
/* Subtitles inside the description body. The page heading ("Job details")
   is an h3 too, so it is excluded here and sized below. */
.welcome-text h3:not(.text-uppercase) {
  font-family: var(--hl-font-wide);
  font-weight: 900;
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 1.75rem 0 0.75rem;
}

/* Page heading above the description */
.welcome-text > h3.text-uppercase {
  font-family: var(--hl-font-cond); /* section heading — Condensed tier */
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 900;
  margin: 0 0 0.6rem;
  margin-left: -0.045em; /* optical alignment, matching the other headings */
}
.welcome-text > h3.text-uppercase {
  padding-bottom: 0.2rem;
}
.welcome-text h4 {
  font-family: var(--hl-font-cond);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  margin: 1.5rem 0 0.5rem;
}
.welcome-text ul {
  list-style: none;
  padding-left: 0;
  /* indent the whole list block from the paragraph edge */
  margin: 0.75rem 0 1.25rem 1.25rem;
}
.welcome-text ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.55;
}
.welcome-text ul li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.55em;
  height: 0.55em;
  background: var(--hl-orange);
  transform: skewX(-12deg); /* slanted square, echoing the slat cuts */
}
/* nested lists: smaller dark marker */
.welcome-text ul ul {
  margin: 0.35rem 0 0.5rem;
}
.welcome-text ul ul li::before {
  width: 0.4em;
  height: 0.4em;
  background: var(--hl-dark);
}

/* Filters / forms */
.form-control {
  border-radius: 0;
  font-family: var(--hl-font-body);
}
.form-control:focus {
  border-color: var(--hl-orange);
  box-shadow: 0 0 0 0.15rem rgba(241, 90, 34, 0.25);
}

/* Pagination */
.page-item.active .page-link {
  background-color: var(--hl-orange);
  border-color: var(--hl-orange);
}
.page-link {
  color: var(--hl-orange);
  border-radius: 0 !important;
}

/* ============================================================ Footer */
.footer,
footer.footer,
.footer.section-brand-gradient {
  background: var(--hl-dark) !important;
  color: var(--hl-cream);
}
.footer h3.heading-section {
  color: var(--hl-cream);
  font-weight: 700;
}
.footer a {
  color: var(--hl-cream);
  text-decoration: underline;
}
.footer a:hover {
  color: #fff;
}
.footer .hl-label {
  color: rgba(242, 238, 230, 0.6);
}
.footer .block-21 .heading a {
  color: var(--hl-cream);
  font-family: var(--hl-font-cond);
  text-transform: uppercase;
  font-size: 1.1rem;
}
.footer .block-21 .meta,
.footer .block-21 .meta a {
  font-family: var(--hl-font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  color: rgba(242, 238, 230, 0.65);
}

/* Floating social bar — align with palette */
.float-fb, .float-ig, .float-li, .float-yt, .float-em {
  background: var(--hl-dark) !important;
}
.fl-fl:hover {
  background: var(--hl-orange) !important;
}