/* ============================================================
   Footer Flyout (independent from header)
   - Panel slides up from bottom
   - Inline footer button with its own SVG + classes
   - Colors driven by Customizer CSS vars
   ============================================================ */

/* ------------------------------------------------------------
   0) Tunables (position for open-state floating toggle)
   ------------------------------------------------------------ */
:root {
  --nf-footer-toggle-offset-x: 16px; /* distance from right edge when OPEN */
  --nf-footer-toggle-offset-y: 16px; /* distance from bottom edge when OPEN */
}

/* ------------------------------------------------------------
   1) Backdrop + Panel
   ------------------------------------------------------------ */

/* Remove panel from layout/tab order when wp-admin sets [hidden] */
.footer-flyout[hidden] { display: none !important; }

/* Panel: present but off-screen; slides up on .is-open */
.footer-flyout {
  position: fixed;
  left: 10px;              /* tiny inset so rounded corners look nice */
  right: 10px;
  bottom: 0;
  height: min(65vh, 560px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Customizer variables (with fallbacks) */
  background: var(--nf-footer-flyout-bg, #0f172a);
  color: var(--nf-footer-flyout-fg, #fff);

  transform: translateY(100%);  /* baseline: off-screen */
  transition: transform .30s ease;
  will-change: transform;

  z-index: 1002; /* backdrop 1000, panel 1002, toggle-on-open 1003 */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.footer-flyout.is-open { transform: translateY(0%); }

/* Backdrop (fades in/out) */
.footer-flyout-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1000;
}
.footer-flyout-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Lock page scroll while open */
body.nf-footer-flyout-open {
  overflow: hidden;
  touch-action: none;
}

/* ------------------------------------------------------------
   2) Flyout content
   ------------------------------------------------------------ */
.footer-flyout__header {
  /* Match site font via var; fallback to your preferred stack */
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 6px;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer-flyout__menu {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 12px;
}

.footer-flyout__list {
  list-style: none;
  margin: 0;
  padding: 0 16px 24px;
}
.footer-flyout__list a {
  display: block;
  padding: 12px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
  color: var(--nf-footer-flyout-fg, #fff);
  border-radius: 10px;
  transition: background-color .2s ease;
}
.footer-flyout__list a:hover,
.footer-flyout__list a:focus {
  background: rgba(255,255,255,.08);
  outline: none;
}

/* ------------------------------------------------------------
   3) Footer Hamburger Button (independent of header)
   ------------------------------------------------------------ */

/* Base button: inline in footer; mobile-only (see media query) */
.site-footer .footer-flyout-toggle--footer {
  position: static;      /* not floating by default */
  display: none;         /* shown on mobile ≤ 768px */
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;

  /* Icon color comes from Customizer var (also used for text) */
  color: var(--nf-footer-flyout-fg, #fff);
}

/* Dedicated SVG icon for footer (uses currentColor) */
.site-footer .footer-flyout-toggle--footer .nf-footer-hamburger {
  display: block;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform .3s ease;
}

/* Animate lines (IDs are unique to footer) */
.site-footer .footer-flyout-toggle--footer .nf-footer-hamburger line {
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: 12px 12px; /* center of 24x24 viewBox */
}

/* Spin + morph to X when open */
.site-footer .footer-flyout-toggle--footer.is-open .nf-footer-hamburger {
  animation: nf-footer-spin .3s ease;
}
.site-footer .footer-flyout-toggle--footer.is-open .nf-footer-hamburger #f-line1 {
  transform: translateY(5px) rotate(45deg);
}
.site-footer .footer-flyout-toggle--footer.is-open .nf-footer-hamburger #f-line2 {
  opacity: 0;
}
.site-footer .footer-flyout-toggle--footer.is-open .nf-footer-hamburger #f-line3 {
  transform: translateY(-5px) rotate(-45deg);
}

@keyframes nf-footer-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(180deg); }
}

/* While open, keep the button above the panel (position may remain static;
   if you prefer a floating close button, uncomment position:fixed) */
.site-footer .footer-flyout-toggle--footer.is-open {
  /* position: fixed; */
  right: var(--nf-footer-toggle-offset-x);
  bottom: var(--nf-footer-toggle-offset-y);
  z-index: 1003; /* above panel (1002) */
}

/* ------------------------------------------------------------
   4) Responsive behavior
   ------------------------------------------------------------ */

/* Desktop ≥ 769px: show normal list; hide hamburger */
@media (min-width: 769px) {
  .site-footer .footer-flyout-toggle--footer { display: none !important; }
  .site-footer .footer-navigation .footer-menu,
  .site-footer .footer-navigation .site-info-item { display: inline-flex !important; }
}

/* Mobile ≤ 768px: hide list; show hamburger aligned right */
@media (max-width: 768px) {
  /* Hide © + text links */
  .site-footer .footer-navigation .footer-menu,
  .site-footer .footer-navigation .site-info-item { display: none !important; }

  /* Footer row as flex so we can push the button to the right edge */
  .site-footer .footer-inner { display: flex; align-items: center; gap: 12px; }
  .site-footer .footer-logo { flex: 0 0 auto; }
  .site-footer .footer-navigation { flex: 1 1 auto; display: flex; }

  /* Show the hamburger; sits at far right */
  .site-footer .footer-flyout-toggle--footer { display: inline-flex !important; }
}

/* ------------------------------------------------------------
   5) Reduced Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-footer .footer-flyout-toggle--footer .nf-footer-hamburger,
  .site-footer .footer-flyout-toggle--footer .nf-footer-hamburger line {
    transition: none;
    animation: none;
  }
}

/* ------------------------------------------------------------
   6) Footer Style Variants
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.nf-footer-style-liquid .footer-flyout {
    left: auto;
    right: 10px;
    width: min(92vw, 420px);
    height: auto;
    max-height: 72vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(110%);
  }

  body.nf-footer-style-liquid .footer-flyout.is-open {
    transform: translateY(0);
  }

  body.nf-footer-style-morph .footer-flyout,
  body.nf-footer-style-push .footer-flyout {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(88vw, 370px);
    height: 100vh;
    border-radius: 0;
    transform: translateX(102%);
    transition: transform .3s cubic-bezier(.2,.7,.15,1);
  }

  body.nf-footer-style-morph .footer-flyout.is-open,
  body.nf-footer-style-push .footer-flyout.is-open {
    transform: translateX(0);
  }

  body.nf-footer-style-push .footer-flyout-backdrop {
    background: rgba(0, 0, 0, .55);
  }

  body.nf-footer-style-push.nf-footer-flyout-open #page-content,
  body.nf-footer-style-push.nf-footer-flyout-open #site-header {
    transform: translateX(-20px);
    opacity: .9;
    transition: transform .25s ease, opacity .25s ease;
  }
}