/* ==========================================================================
   PLANQ FOOTER
   --------------------------------------------------------------------------
   Phase 0 findings this file answers:

   - footer-1 carried a background image named
     "ancient-egypt-flat-illustration..." on a computer manufacturer's site
   - footer-2 was rgba(145,0,29,0.23), a third red, semi-transparent
   - .absolute-footer was forced `color: black` on a dark background
   - the three real published legal pages (Privacy Policy, Terms of Use,
     Refund and Returns Policy) were linked ZERO times anywhere on the site.
     Surfacing them in the footer was Phase 0's cheapest CRITICAL fix.

   The markup this styles is template-parts/footer/footer.php, which overrides
   the Flatsome parent template of the same path. Nothing in the parent theme
   is modified.

   Every link in the footer points at a page, post, category or profile that
   was VERIFIED to exist on staging. No placeholder columns, no invented
   social accounts, no invented addresses, no invented certifications.
   ========================================================================== */

/* ==========================================================================
   0. NEWSLETTER BAND
   --------------------------------------------------------------------------
   The one genuinely functional thing in the old footer-2 widget area was the
   "Signup for Newsletter" UX block, which wraps Gravity Forms form 1. It is
   preserved rather than rebuilt: the template renders PLANQ's own block, so it
   stays editable in UX Builder and the form keeps working.

   It sits on a LIGHT surface above the dark footer, deliberately. The block
   hard-codes text_color="rgb(0,0,0)"; on the dark shell that text would be
   invisible, and the alternative — overriding PLANQ's authored colour with
   !important — would break the block the moment they edit it.
   ========================================================================== */

.planq-footer-signup {
  background-color: var(--planq-surface-2);
  border-top: 1px solid var(--planq-border-soft);
  padding-block: var(--planq-space-7);
}

/* The block is centred by its own shortcode; this just stops the form from
   stretching to the full page width, which looked unfinished.

   PHASE 3. `text-align: start` is the fix for a real misalignment, not a
   preference. The shortcode sets text_align="center" on the wrapping ux_text,
   which the form inherited: Gravity Forms' labels are `display: inline-block`
   so "Email" and "CAPTCHA" centred themselves over a full-width input, while
   `.gform_footer { display: flex }` kept the submit button hard against the
   left edge. Three different alignments in a four-element form. Left-aligning
   the whole form gives the labels, the input and the button one shared edge,
   and the heading above it stays centred as authored.

   The typography reset is the second half of planq_unwrap_heading_form(): that
   function takes the form out of the heading in the markup, and these two
   declarations stop anything Gravity Forms injects at runtime from inheriting
   heading type if the authored block is ever re-nested. */
.planq-footer-signup .gform_wrapper {
  max-width: 32rem;
  margin-inline: auto;
  margin-block-end: 0;
  font-size: var(--planq-text-base);
  font-weight: var(--planq-weight-regular);
  line-height: var(--planq-leading-normal);
  text-align: start;
}

/* The band's own 48px padding is the space below the form. Gravity Forms adds
   16px of footer padding and 8px on the button on top of that, which measured
   as 72px of trailing whitespace under a 44px button.

   0-4-0, deliberately: theme.min.css ships
   `.gform_wrapper.gravity-theme .gform_footer { padding: 16px 0 }` at 0-3-0 and
   the plugin's stylesheet is enqueued AFTER the child theme's, so an equal
   -specificity rule here would lose on source order. One extra class is the
   smallest increment that wins. */
.planq-footer-signup .gform_wrapper.gravity-theme .gform_footer {
  margin-block: 0;
  padding-block: 0;
}

.planq-footer-signup .gform_wrapper.gravity-theme .gform_footer input {
  margin-block-end: 0;
}

/* The heading now ends where the sentence ends, so it owns the gap to the form
   rather than inheriting a heading margin sized for body copy beneath it. */
.planq-footer-signup h2 {
  margin-block-end: var(--planq-space-5);
}

/* MOBILE TOUCH TARGETS. Measured at 375: the email input came back 351x38 and
   the submit button 99x32, both with `min-height: 32px` — on mobile, where the
   target matters most, and against a design system whose --planq-control-h is
   44px for exactly this reason.

   The cause is in gravityforms/assets/css/dist/basic.min.css:

     @media only screen and (max-width:641px) {
       .gform_wrapper.gravity-theme
       input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file])
       { line-height:2; min-height:32px }
     }

   Two classes plus four attribute selectors inside :not() is 0-6-1, and the
   plugin's stylesheet is enqueued after the child theme's, so nothing in the
   child theme's component layer could reach it. One extra class ahead of the
   same selector shape makes this 0-7-1 — the smallest increment that wins, and
   the reason the ugly :not() chain is reproduced verbatim rather than
   simplified. The media query is copied exactly too, so no viewport falls
   between the two rules.

   Scoped to the signup band deliberately. The same plugin rule shrinks controls
   on PLANQ's other Gravity Forms (the support and contact pages), but those are
   not Phase 3 surfaces and fixing them globally from a footer stylesheet would
   be the wrong place. Recorded in 20_OPEN_DECISIONS.md. */
@media only screen and (max-width: 641px) {
  .planq-footer-signup .gform_wrapper.gravity-theme
  input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
    min-block-size: var(--planq-control-h);
    line-height: var(--planq-leading-normal);
  }
}

.planq-footer-signup p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   1. SHELL
   ========================================================================== */

.planq-footer {
  background-color: var(--planq-surface-inverse);
  color: var(--planq-text-inverse-muted);
  font-size: var(--planq-text-sm);
  line-height: var(--planq-leading-normal);
}

.planq-footer a {
  color: var(--planq-text-inverse-muted);
  text-decoration: none;
  transition: color var(--planq-dur-1) var(--planq-ease);
}

.planq-footer a:hover {
  color: var(--planq-text-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   2. MAIN REGION
   ========================================================================== */

.planq-footer__main {
  padding-block: var(--planq-space-8);
}

.planq-footer__grid {
  display: grid;
  gap: var(--planq-space-7) var(--planq-space-6);
  grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  align-items: start;
}

/* ==========================================================================
   3. BRAND COLUMN
   ========================================================================== */

.planq-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--planq-space-4);
  max-width: 34ch;
}

.planq-footer__logo {
  display: inline-block;
}

.planq-footer__logo img {
  display: block;
  max-height: 34px;
  width: auto;
}

/* Fallback used only if the white wordmark attachment is ever unavailable, so
   the footer is never brandless. */
.planq-footer__logo--text {
  color: var(--planq-text-inverse);
  font-size: var(--planq-text-xl);
  letter-spacing: var(--planq-tracking-tight);
}

.planq-footer__logo--text:hover {
  text-decoration: none;
}

/*
 * There is deliberately no brand-statement rule here.
 *
 * The brand column holds the wordmark and nothing else. A one-line positioning
 * statement under it would improve the footer, but PLANQ has not supplied
 * approved copy for that slot and §8 of the Phase 1 brief forbids inventing it.
 * Styling a class the template never emits would be a promise this theme does
 * not keep, so the rule is added when the copy exists. Recorded as an open item
 * in docs/planq-redesign/phase-1/07_FOOTER.md.
 */

/* ==========================================================================
   4. LINK COLUMNS
   ========================================================================== */

.planq-footer__col-title {
  margin: 0 0 var(--planq-space-4);
  color: var(--planq-text-inverse);
  font-size: var(--planq-text-2xs);
  font-weight: var(--planq-weight-bold);
  letter-spacing: var(--planq-tracking-eyebrow);
  text-transform: uppercase;
}

.planq-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.planq-footer__list > li {
  margin: 0;
}

/* A 40px row keeps the tap targets usable without turning the footer into a
   full extra screen on mobile. Padding, not height, so long labels wrap. */
.planq-footer__list > li > a {
  display: block;
  padding-block: var(--planq-space-2);
  line-height: var(--planq-leading-snug);
}

/* ==========================================================================
   5. CONTACT
   --------------------------------------------------------------------------
   Only the channels that were verified to exist: the support email configured
   in the theme mods and the Facebook profile configured there. No telephone
   number and no postal address are printed, because none was verified.
   ========================================================================== */

.planq-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
}

.planq-footer__contact > li {
  margin: 0 0 var(--planq-space-2);
}

.planq-footer__contact-label {
  display: block;
  color: var(--planq-text-inverse-muted);
  font-size: var(--planq-text-2xs);
  letter-spacing: var(--planq-tracking-wide);
}

/* Every contact value in the template is a link (mailto: or an external
   profile), so this targets the link rather than a wrapper class. */
.planq-footer__contact a {
  color: var(--planq-text-inverse);
  font-weight: var(--planq-weight-bold);
}

.planq-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--planq-space-2);
  list-style: none;
  margin: var(--planq-space-4) 0 0;
  padding: 0;
}

.planq-footer__social > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--planq-space-2);
  min-height: var(--planq-control-h-sm);
  padding-inline: var(--planq-space-3);
  border: 1px solid var(--planq-border-strong-inverse);
  border-radius: var(--planq-radius-sm);
  color: var(--planq-text-inverse);
  font-size: var(--planq-text-xs);
  font-weight: var(--planq-weight-bold);
  text-decoration: none;
}

.planq-footer__social > li > a:hover {
  background-color: var(--planq-surface-inverse-2);
  border-color: var(--planq-text-inverse);
  text-decoration: none;
}

/* ==========================================================================
   6. BOTTOM BAR
   --------------------------------------------------------------------------
   Where the three real legal pages live.
   ========================================================================== */

.planq-footer__bottom {
  border-top: 1px solid var(--planq-border-inverse);
  padding-block: var(--planq-space-5);
}

.planq-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--planq-space-4);
}

.planq-footer__copyright {
  margin: 0;
  color: var(--planq-text-inverse-muted);
  font-size: var(--planq-text-2xs);
}

.planq-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--planq-space-2) var(--planq-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.planq-footer__legal > li {
  margin: 0;
}

.planq-footer__legal > li > a {
  display: inline-block;
  padding-block: var(--planq-space-1);
  font-size: var(--planq-text-2xs);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1023px) {
  .planq-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planq-footer__brand {
    grid-column: 1 / -1;
    max-width: 48ch;
  }
}

@media (max-width: 549px) {
  .planq-footer__main {
    padding-block: var(--planq-space-7);
  }

  .planq-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--planq-space-6);
  }

  .planq-footer__brand {
    max-width: none;
  }

  .planq-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   8. NEUTRALISE THE OLD FLATSOME FOOTER
   --------------------------------------------------------------------------
   The parent template is replaced, so footer-1 / footer-2 / .absolute-footer
   no longer render. These rules are the safety net for any page or plugin
   that emits them directly, and they cost nothing.
   ========================================================================== */

.footer-1,
.footer-2 {
  background-image: none;
  background-color: var(--planq-surface-inverse);
}

.absolute-footer {
  color: var(--planq-text-inverse-muted);
  background-color: var(--planq-surface-inverse);
}

.absolute-footer a {
  color: var(--planq-text-inverse-muted);
}

/* The legacy custom CSS set `ul.links { font-size: 0.95em }` and
   `span.widget-title { color: blue }`. Both are retired; the widget title
   style is restated here in PLANQ terms for any widget still in a sidebar. */
.widget-title,
span.widget-title {
  color: var(--planq-text-strong);
  font-size: var(--planq-text-2xs);
  font-weight: var(--planq-weight-bold);
  letter-spacing: var(--planq-tracking-eyebrow);
  text-transform: uppercase;
}

.planq-footer .widget-title,
.planq-footer span.widget-title {
  color: var(--planq-text-inverse);
}