/* okitoki-v3 footer — PROG-9963. Tracked component file (NOT the style.css monolith,
 * NOT QuadMenu/DB CSS). Ported from the verstak design drop (oki-contacts-main/css/oki-footer.css).
 * Uses new .site-footer* BEM classes, so the legacy .footer* rules in style.css no longer
 * match this markup (dead, optional cleanup later). Corporate tokens are scoped locally to
 * .site-footer (design convention) so they do not collide with landing tokens. Enqueued after
 * okitoki-style in functions.php. */

/* Local corporate tokens (footer-scoped, mirrors design oki-chrome.css). */
.site-footer {
  --color-footer: #2B3643;
  --color-brand:  #18D0CD;
  --container:    1200px;
  --gutter:       clamp(18px, 4.5vw, 36px);
  --radius-pill:  999px;
  --dur:  .2s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  background: var(--color-footer);
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

/* Stable, centered inner width (design value; main page container is wider). */
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) var(--gutter) 26px;
}

/* 4 columns */
.footer-cols { display: flex; justify-content: space-between; gap: 28px; }
.footer-col { flex: 1 1 0; min-width: 0; }
.footer-col:first-child { flex: 1.3 1 0; }
.footer-col--sub { flex: 1.05 1 0; }

.footer-col__title { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 12px; line-height: 1.2; }

/* Menu lists are emitted by wp_nav_menu with menu_class="footer-col__list". */
.footer-col__list { list-style: none; margin: 0; padding: 0; }
.footer-col__list li + li { margin-top: 9px; }
.footer-col__list a { font-size: 14px; line-height: 1.3; color: #fff; transition: color var(--dur) var(--ease); }
.footer-col__list a:hover,
.footer-col__list a:focus-visible { color: var(--color-brand); }
.footer-col--upper .footer-col__list a { font-weight: 700; text-transform: uppercase; }

/* Subscribe — the CF7 fields carry baked classes (.footer-subs_input / .footer-subs_btn) that
   style.css renders into the white pill + absolute teal arrow button. That button is
   position:absolute, so it needs a positioned ancestor. Provide it on the STABLE column class
   (.footer-col--sub) so it holds regardless of the inner wrapper class name. Do NOT re-style the
   CF7 input/button here — let the legacy rules own the pill. */
.footer-sub { max-width: 280px; margin-bottom: 22px; }
.footer-col--sub .wpcf7-form { position: relative; z-index: 1; }
.footer-col--sub .wpcf7-form p { margin: 0; }
/* Higher specificity (.site-footer ...) to beat BOTH the theme reset and CF7's own
   default .wpcf7 form .wpcf7-response-output (margin:2em, specificity 0-2-1). */
.site-footer .footer-col--sub .wpcf7-response-output { margin: 12px 0 0; border-radius: 10px; font-size: 12px; }
/* The global .wpcf7-not-valid-tip is position:absolute; bottom:12px; width:100% (style.css),
   which overlays the pill and clashes with the placeholder (the legacy .footer-subs wrapper
   reset it, but this footer uses .footer-col--sub). Flow it BELOW the field like the contacts
   form: relative position + top gap, left-aligned to the pill's 20px padding. This also frees
   the input's click zone (the absolute tip no longer sits over it). */
.footer-col--sub .wpcf7-not-valid-tip {
  position: relative; bottom: auto; width: auto;
  margin: 6px 0 0 20px;
  font-size: 12px; font-weight: 600; color: #ff8f6b;
}
/* Clearer active/focus zone on the e-mail pill. */
.footer-col--sub .footer-subs_input:focus,
.footer-col--sub .footer-subs_input:focus-visible {
  outline: 2px solid var(--color-brand); outline-offset: 2px;
}

/* Social — branded icons keyed by the ACF "sociallist" link (the image sub-field is empty).
   All circular, brand-colored, spread across the e-mail field width. */
.footer-social { display: flex; justify-content: space-between; gap: 10px; max-width: 280px; list-style: none; margin: 0; padding: 0; }
.footer-social li { flex: 0 0 auto; }
.footer-social__ic {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .10);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.footer-social__ic:hover,
.footer-social__ic:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.footer-social__ic svg { width: 22px; height: 22px; }
.footer-social__ic--fb { background: #1877F2; }
.footer-social__ic--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7); }
.footer-social__ic--tg { background: #2AABEE; }
.footer-social__ic--yt { background: #FF0000; }

/* Bottom row — fixed via flex (the legacy footer's bottom row floated inconsistently). */
.site-footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: nowrap;
}
.site-footer__copy { font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.5; margin: 0; }
.site-footer__copy a { color: var(--color-brand); }
.site-footer__copy a:hover { text-decoration: underline; }
.site-footer__badge { flex-shrink: 0; line-height: 0; }
.site-footer__badge img { width: 110px; height: auto; }

/* Scroll-to-top control kept from the legacy footer (JS in footer.php targets .scroll-to-top). */
.site-footer .scroll-to-top { cursor: pointer; }

/* ---- Responsive ---------------------------------------------------------- *
 * Desktop (>1024): 4 columns in a row. Tablet (<=1024): 2x2 grid — all columns
 * equal, so the wider first column and the subscribe column reset to 50%. Phone
 * (<=560): single column; the subscribe form and social row go full width, and
 * the bottom row (copyright + badge) stacks. The verstak design drop shipped no
 * breakpoints, so these are tuned here. */
@media (max-width: 1024px) {
  .footer-cols { flex-wrap: wrap; gap: 36px 32px; }
  .footer-col,
  .footer-col:first-child,
  .footer-col--sub { flex: 1 1 calc(50% - 16px); }
}

@media (max-width: 560px) {
  .footer-cols { gap: 28px; }
  .footer-col,
  .footer-col:first-child,
  .footer-col--sub { flex: 1 1 100%; }
  .footer-sub { max-width: 100%; }
  .footer-social { max-width: 100%; justify-content: flex-start; gap: 14px; }
  .site-footer__inner { padding: clamp(36px, 9vw, 56px) var(--gutter) 24px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
}