/* ==========================================================================
   PLANQ FOOTER — SUPPORT RULES
   ==========================================================================

   FOOTER-ONLY PORT. This file exists because the redesigned footer depends on
   a handful of rules that live in the new site's GLOBAL stylesheets, and those
   sheets must NOT be copied to the live site: reset.css, layout.css,
   typography.css and responsive.css restyle every page, which is far more than
   a footer swap.

   So the rules the footer genuinely needs are extracted here, and nothing else
   comes across. Each block records where it came from, so a later full-theme
   deployment can delete this file rather than reconcile a fork of it.

   SOURCE OF EVERY RULE BELOW (new site, wp-content/themes/planq-child/):
     assets/css/layout.css      lines 20-46   containers
     assets/css/reset.css       lines 208-218 .planq-sr-only
     assets/css/reset.css       lines 141-144 focus ring on the dark surface
     assets/css/reset.css       lines 278-286 print
     assets/css/components.css  lines 123-133 secondary button on dark
     assets/css/responsive.css  lines 318-326 social buttons under 400px
     assets/css/responsive.css  lines 358-367 coarse-pointer target size

   WHAT IS DELIBERATELY NOT HERE. The source rules also name .planq-section
   --inverse, .header-top, .planq-product-card__specs, .planq-btn--sm,
   .searchform, .product-small, .nav-dropdown, .nav-column, #main-menu,
   .back-to-top, .skip-link and `body`. Every one of those is outside the
   footer, so carrying it would change the live site beyond the footer. Each
   selector below was narrowed to its .planq-footer part only.

   REQUIRES planq-tokens.css, which must print BEFORE this file.
   ========================================================================== */


/* --- Containers ----------------------------------------------------------
   footer.php emits .planq-container (the footer bands) and
   .planq-container-content (the newsletter band). .planq-container-wide is in
   the source rule too and is NOT carried: the footer never emits it. */

.planq-container,
.planq-container-content {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--planq-gutter);
}

.planq-container          { max-width: var(--planq-page-max); }
.planq-container-content  { max-width: var(--planq-content-max); }

@media (min-width: 550px) {
  .planq-container,
  .planq-container-content {
    padding-inline: var(--planq-gutter-md);
  }
}

@media (min-width: 1024px) {
  .planq-container,
  .planq-container-content {
    padding-inline: var(--planq-gutter-lg);
  }
}


/* --- Screen-reader-only --------------------------------------------------
   footer.php emits one .planq-sr-only span: the "(opens in a new tab)" note on
   the Facebook link. Without this rule that text is VISIBLE in the footer, so
   this is not an accessibility nicety, it is required for correct rendering. */

.planq-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --- Focus ring on the dark surface --------------------------------------
   The footer is a dark band. A focus outline in the default ink colour is
   nearly invisible on it, so keyboard focus is lost exactly where the legal
   links live. Narrowed to .planq-footer; the source rule also covers
   .header-top and .planq-section--inverse, neither of which this port
   touches.

   :is() keeps the specificity at 0-3-0, above the base focus rule it
   overrides in the source theme. Retained here so behaviour matches the new
   site even though this port ships no base rule. */

.planq-footer :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--planq-focus-inverse);
}


/* --- Secondary button on the dark surface --------------------------------
   Only reachable if the newsletter block or a plugin renders a
   .planq-btn--secondary inside the footer. Carried because it costs two rules
   and its absence would be a light-on-light button. */

.planq-footer .planq-btn--secondary {
  border-color: var(--planq-border-strong-inverse);
  color: var(--planq-text-inverse);
}

.planq-footer .planq-btn--secondary:hover {
  background-color: var(--planq-surface-inverse-2);
  border-color: var(--planq-text-inverse);
  color: var(--planq-text-inverse);
}


/* --- Social buttons, narrow viewports -----------------------------------
   Source block is inside @media (max-width: 400px). Full-width rather than one
   per row with ragged edges. */

@media (max-width: 400px) {

  .planq-footer__social {
    flex-direction: column;
    align-items: stretch;
  }

  .planq-footer__social > li > a {
    justify-content: flex-start;
  }
}


/* --- Coarse pointer ------------------------------------------------------
   The social link grows to the full target height when the pointer is a
   finger. Narrowed to the footer selector; the source rule also lists five
   non-footer controls. */

@media (pointer: coarse) {

  .planq-footer__social > li > a {
    min-height: var(--planq-control-h);
  }
}