/**
 * CUTIS Theme — Site footer
 * Classes kept identical to _design-reference/style.css (site-footer,
 * footer-links, footer-bottom, social-row, brand-mark) where they don't
 * collide with anything in header.css/layout.css. Site-wide — enqueued
 * unconditionally in cutis_enqueue_header_assets(), not scoped to
 * is_singular('service') like the per-service section stylesheets.
 *
 * COLUMN LAYOUT DEVIATION (documented per the brief): the reference
 * hardcodes the footer to exactly 3 fixed-width link columns via Bootstrap-
 * style classes (col-lg-2 / col-lg-2 / col-lg-4, on top of the brand's own
 * col-lg-4). Since footer_columns is a genuinely admin-editable repeater
 * (any number of columns, not always 3), this file does NOT reuse the
 * .row/.col-lg-* grid already defined in single-service-types.css /
 * single-service-blog.css — a fixed-width Bootstrap column can't flex to
 * fit an arbitrary column count. Instead .footer-row/.footer-col below are
 * a fresh flexbox layout: the brand block gets a wide flex-basis (roughly
 * matching the reference's col-lg-4 proportion), and every .footer-col
 * shares the remaining space equally via `flex: 1 1 160px`, wrapping onto
 * additional rows as needed on narrower widths regardless of how many
 * columns exist — 3 columns happens to look close to the reference at
 * desktop widths, but 1, 2, 5, or more all lay out sensibly too.
 *
 * PADDING: the reference's .site-footer only sets `padding-top` (no
 * bottom) — .footer-bottom supplies its own bottom spacing via
 * margin-top/padding-block plus its top border, so adding the site's
 * .section-padding utility here (top AND bottom) would double up spacing
 * at the very bottom of the page. Instead this file reproduces the
 * reference's own top-only padding, using the same responsive scale
 * (80/60/40px) as .section-padding for rhythm continuity, just applied as
 * padding-top only, matching the reference's intent exactly.
 *
 * Brand logo: has_custom_logo()/the_custom_logo() reused from header.php's
 * pattern, sized with the same --cutis-logo-max-width/height tokens as
 * single-service-header.css's .site-header__logo img, plus a text-only
 * fallback (.footer-brand__logo-link/-text) mirroring .site-header__logo-
 * link/-text for consistency when no custom logo is set.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens.
 * The dark background/overlay tones (#0d2827 and the translucent whites)
 * are section-specific brand styling with no matching token — hardcoded
 * straight from the reference, same treatment as single-service-final-
 * cta.css's gradient.
 */

/* ------------------------------------------------------------------ */
/* Shell */
/* ------------------------------------------------------------------ */
.site-footer {
  background: #0d2827;
  color: rgba(255, 255, 255, 0.72);
  padding-top: 80px;
}
@media (max-width: 1199px) {
  .site-footer {
    padding-top: 60px;
  }
}
@media (max-width: 767px) {
  .site-footer {
    padding-top: 40px;
  }
}

.site-footer h5 {
  color: var(--cutis-color-surface);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--cutis-color-cream);
}

/* ------------------------------------------------------------------ */
/* Flexible row/columns — see file header for the deviation from the
   reference's fixed 3-column Bootstrap layout. */
/* ------------------------------------------------------------------ */
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 32px;
}
.footer-col {
  flex: 1 1 160px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

/* ------------------------------------------------------------------ */
/* Brand column */
/* ------------------------------------------------------------------ */
.footer-brand {
  flex: 1 1 260px;
  max-width: 360px;
}
.footer-brand img {
  max-width: var(--cutis-logo-max-width);
  max-height: var(--cutis-logo-max-height);
  width: auto;
  height: auto;
  display: block;
}
.footer-brand__logo-link {
  display: inline-block;
  text-decoration: none;
}
.footer-brand__logo-text {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cutis-color-surface);
}
.footer-brand p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  max-width: 320px;
  margin-top: 16px;
}

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.social-row a:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.06);
}
.social-row svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------ */
/* Bottom bar */
/* ------------------------------------------------------------------ */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 56px;
  padding-block: 24px;
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}
.footer-legal a {
  font-size: 12.5px;
}