/* ============================================================
   Site footer — German Power Solutions

   Four bands, top to bottom:
     1. .gps-ftr__reach   contact details + newsletter
     2. .gps-ftr__main    brand blurb + two link columns
     3. .gps-ftr__certs   credentials strip
     4. .gps-ftr__base    copyright, legal menu, social

   Scope: every rule binds either to a .gps-ftr* class that
   wp/gps-theme/footer.php emits, or to a WordPress core class that
   lands inside it (.menu-item, .current-menu-item, .widget,
   .widget-title). Nothing here depends on a hand-written class that
   wp_nav_menu() would not produce, which is what lets the same
   stylesheet serve sections/footer.html and the theme unchanged.

   COLOUR — every pairing used here, computed from the literal token
   values in tokens.css with the WCAG 2.x relative-luminance formula:

     text  --gps-white  #ffffff on --gps-black #111111   18.88:1  AAA
           headings, contact links, menu links, the copyright line.

     text  --grey-300   #cccccc on --gps-black #111111   11.76:1  AAA
           the brand blurb, the newsletter lede, the address, the
           legal menu -- everything deliberately stepped back from
           the primary links. Still AAA, so "secondary" here is a
           typographic decision and not a contrast compromise.

     text  --gps-yellow #ffce00 on --gps-black #111111   12.66:1  AAA
           link :hover / :focus-visible, .current-menu-item, the
           contact icons, the Read More affordance.

     text  --gps-black  #111111 on --gps-yellow #ffce00  12.66:1  AAA
           the newsletter submit button.

     text  --grey-600   #5a5f66 on --gps-white #ffffff    6.4:1   AA
           the newsletter input's placeholder, which sits on the
           white field rather than on the footer ground.

     non-text --gps-yellow on --gps-black                12.66:1
           the 4px top rule and the newsletter accent bar; both
           clear the 3:1 floor for meaningful non-text content.

     non-text --grey-600 on --gps-black                   2.93:1
           band hairlines only. They carry no text, are not an
           affordance, and repeat a boundary the spacing already
           makes -- so the 3:1 UI-component floor does not apply.

   NOT USED, deliberately: --gps-red on --gps-black is 3.66:1, which
   is large-text-only at best. tokens.css rules the pairing out for
   text and the palette has yellow for that job. The contact icons
   that are red in the header are yellow here.
   ============================================================ */

/* ---------- Shell ----------
   The 4px top rule is var(--sp-1) rather than a literal 4px: --sp-1 is
   exactly .25rem, and a raw pixel where a token exists is the thing
   that drifts. --fs-sm steps the whole footer down; a footer is
   reference material, and 14px is also what keeps the longest
   placeholder contact string inside a 320px viewport before
   overflow-wrap has to do anything. */
.gps-ftr{
  background:var(--gps-black);
  color:var(--gps-white);
  border-top:var(--sp-1) solid var(--gps-yellow);
  font-size:var(--fs-sm);
  line-height:var(--lh-body);
}

/* One link rule for the whole footer, so widget markup we do not
   control gets the same affordance as the menus we do. */
.gps-ftr a{
  color:var(--gps-white);
  transition:color var(--dur-fast) var(--ease);
}
.gps-ftr a:hover,
.gps-ftr a:focus-visible{color:var(--gps-yellow)}

/* Icons are restated here rather than inherited from header.css. This
   stylesheet declares gps-base as its only dependency, so leaning on
   the header's .gps-ico geometry would be a dependency nothing
   enforces. .gps-ftr .gps-ico is (0,2,0), so it wins over header.css's
   (0,1,0) whatever the enqueue order turns out to be. */
.gps-ftr .gps-ico{
  width:1.125rem;height:1.125rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

/* The sprite is hidden by base.css, globally and with the spelling
   that keeps <use> resolvable. This file used to repeat it here as
   display:none, which is the variant that can strand a <use>. */

/* Every band's hairline, declared once. The first band takes the yellow
   rule on .gps-ftr instead, so it opts out -- two lines 4px apart reads
   as a mistake. */
.gps-ftr__main,
.gps-ftr__certs,
.gps-ftr__base{border-top:1px solid var(--grey-600)}

/* min-width:0 on every grid child. A grid item's default min-width is
   auto, which is exactly what lets one long unbreakable string push a
   track -- and the page -- wider than the viewport. */
.gps-ftr__contact,
.gps-ftr__news,
.gps-ftr__brand-col,
.gps-ftr__menus,
.gps-ftr__menu-group{min-width:0}

/* ============================================================
   Band 1 — Contact + newsletter
   ============================================================ */

/* 1fr 2fr, matching the reference's third/two-thirds split. The
   newsletter gets the wider track because it holds a form, and an
   email field narrower than about 18rem starts truncating the address
   the user is typing. */
.gps-ftr__reach-inner{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:var(--sp-7) var(--sp-9);
  align-items:start;
  padding-block:clamp(var(--sp-7),4.5vw,var(--sp-9));
}

/* The newsletter column is optional — emptying its heading in the
   Customizer removes it. Without this the contact details would keep
   the 1fr track and sit in a third of the footer with two thirds of
   empty grid beside them. footer-reach.php sets the class. */
.gps-ftr__reach-inner--solo{grid-template-columns:minmax(0,1fr)}

.gps-ftr__title{
  margin:0 0 var(--sp-4);
  font-family:var(--font-head);
  font-size:clamp(1.375rem,2.2vw,1.75rem);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-tight);
  line-height:var(--lh-head);
  color:var(--gps-white);
}

.gps-ftr__contact-list{
  display:grid;
  gap:var(--sp-1);
  margin:0 0 var(--sp-5);
  padding:0;
  list-style:none;
}

/* 2.75rem is the 44px touch-target floor, on both axes. The min-width
   matters for a short label, where the text box alone would be
   narrower than a fingertip. */
.gps-ftr__contact-link{
  display:flex;align-items:center;gap:var(--sp-3);
  min-height:2.75rem;min-width:2.75rem;
  padding-block:var(--sp-1);
  font-weight:var(--fw-med);
}
.gps-ftr__contact-link .gps-ico{color:var(--gps-yellow)}

/* The placeholder address info@germanpowersolutions.example has no
   UAX#14 break opportunity in it: `@` is class AL and LB29 forbids a
   break between a `.` and the letter after it. At --fs-base it
   measures ~288px and a 320px viewport gives the content box 280, so
   it pushed the page sideways. overflow-wrap:anywhere is the part of
   the fix that survives a client pasting something longer into the
   Customizer; min-width:0 is what lets the flex item shrink far
   enough for it to apply. */
.gps-ftr__contact-link > span{
  min-width:0;
  overflow-wrap:anywhere;
}

/* The channel tag on the messaging row. It is not a second link and
   not decoration -- it is what tells a reader why the same number
   appears twice. */
.gps-ftr__contact-tag{
  flex:none;
  padding:0 var(--sp-2);
  border:1px solid var(--grey-600);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--grey-300);
}

.gps-ftr__where{
  display:flex;align-items:flex-start;gap:var(--sp-3);
  min-width:0;
}
.gps-ftr__where .gps-ico{color:var(--gps-yellow);margin-top:.28em}

.gps-ftr__address{
  margin:0;min-width:0;
  font-style:normal;               /* <address> defaults to italic */
  overflow-wrap:anywhere;
  color:var(--grey-300);
}

/* ---------- Newsletter ----------
   The accent bar is a border rather than a pseudo-element so it grows
   with the block: this column is the tallest thing in the band on
   desktop and the shortest once the grid collapses, and a fixed-height
   ::before would be wrong in one of those two states. */
.gps-ftr__news{
  border-left:var(--sp-1) solid var(--gps-yellow);
  padding-left:clamp(var(--sp-5),2.5vw,var(--sp-7));
}

.gps-ftr__news-lede{
  margin:0 0 var(--sp-5);
  max-width:46ch;
  color:var(--grey-300);
}

/* Flex, not grid: the button is sized by its label and the field takes
   what is left, which is one `flex:1` rather than a grid template that
   would have to guess the button's width. */
.gps-ftr__form{
  display:flex;flex-wrap:wrap;
  gap:var(--sp-3);
  max-width:38rem;
}

/* 3.25rem matches .btn's min-height in base.css, so the field and the
   button share a baseline without either one being nudged by hand.
   The white field is deliberate: a dark input on a dark ground reads
   as disabled, and browsers' own autofill styling assumes a light
   field and overrides whatever we set anyway. */
.gps-ftr__input{
  flex:1 1 16rem;min-width:0;
  min-height:3.25rem;
  padding:var(--sp-3) var(--sp-4);
  border:2px solid var(--gps-white);
  border-radius:var(--radius-0);
  background:var(--gps-white);
  color:var(--gps-black);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
}
.gps-ftr__input::placeholder{color:var(--grey-600);opacity:1}
.gps-ftr__input:focus-visible{border-color:var(--gps-yellow)}

/* Not .btn: the button has to match the field's 3.25rem exactly and
   .btn's uppercase tracking at --fs-sm would make the two look like
   they came from different components. The shape is the same. */
.gps-ftr__submit{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.25rem;
  padding:var(--sp-3) var(--sp-7);
  border:2px solid var(--gps-yellow);
  border-radius:var(--radius-0);
  background:var(--gps-yellow);
  color:var(--gps-black);
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.gps-ftr__submit:hover{
  background:var(--gps-white);
  border-color:var(--gps-white);
}
.gps-ftr__submit:active{transform:translateY(1px)}

/* ============================================================
   Band 2 — Brand blurb + link columns
   ============================================================ */

.gps-ftr__main-inner{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:var(--sp-7) var(--sp-9);
  align-items:start;
  padding-block:clamp(var(--sp-7),4.5vw,var(--sp-9));
}

.gps-ftr__brand{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
/* The mark carries its own fills, so the hover colour on the wrapping
   anchor must not bleed into it. */
.gps-ftr__brand:hover,
.gps-ftr__brand:focus-visible{color:var(--gps-white)}

.gps-ftr__mark{width:2.75rem;height:2.75rem;flex:none}

.gps-ftr__lockup{display:flex;flex-direction:column;line-height:1.1}
.gps-ftr__word{
  font-family:var(--font-head);
  font-size:var(--fs-xl);
  font-weight:var(--fw-black);
  letter-spacing:var(--tr-snug);
  text-transform:uppercase;
}
.gps-ftr__descriptor{
  font-size:var(--fs-xs);
  font-weight:var(--fw-med);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--gps-yellow);
}

/* The client's own logo, when one is set in the Customizer. Bounded by
   height so a wordmark of any ratio keeps its proportions, and capped
   in width so a 1200px upload cannot widen the grid track. */
.gps-ftr__logo{
  display:block;
  max-width:min(100%,13.75rem);
  height:auto;
  margin-bottom:var(--sp-5);
}

.gps-ftr__blurb{
  margin:0 0 var(--sp-5);
  max-width:46ch;
  color:var(--grey-300);
}

.gps-ftr__more{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:2.75rem;
  font-family:var(--font-head);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);
  text-transform:uppercase;
  color:var(--gps-yellow);
}
.gps-ftr__more .gps-ico{transition:transform var(--dur) var(--ease)}
.gps-ftr__more:hover .gps-ico,
.gps-ftr__more:focus-visible .gps-ico{transform:translateX(.25rem)}

/* ---------- The two link groups ---------- */
.gps-ftr__menus{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-7) var(--sp-6);
}

.gps-ftr__head{
  margin:0 0 var(--sp-4);
  font-family:var(--font-head);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);
  line-height:var(--lh-head);
  text-transform:uppercase;
  color:var(--gps-white);
}

/* ---------- Disclosure control ----------
   assets/js/footer.js builds this button inside the <h3> below 48rem
   and removes it again above, so these rules only ever apply on a
   phone. They are written unconditionally anyway: if the teardown
   ever fails to run, a heading that still looks like a heading is a
   far better failure than one rendered as a bare browser button.

   all:unset would be shorter and wrong -- it also clears the button's
   type, which takes `cursor` and the focus ring with it. */
.gps-ftr__head .gps-ftr__toggle{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;min-height:2.75rem;
  margin:0;padding:0;
  border:0;background:none;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:inherit;text-align:left;
  cursor:pointer;
}
.gps-ftr__head .gps-ftr__toggle:hover{color:var(--gps-yellow)}

.gps-ftr__toggle-ico{
  width:1.25rem;height:1.25rem;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur) var(--ease);
}
.gps-ftr__toggle[aria-expanded="true"] .gps-ftr__toggle-ico{
  transform:rotate(180deg);
}

/* Belt to the UA stylesheet's braces. Nothing here sets `display` on
   the list, so [hidden] would win on its own -- but a later rule that
   did would silently defeat the accordion, and the failure mode is an
   always-open menu that the button claims is closed. */
.gps-ftr__menu[hidden]{display:none}

/* CSS multi-column rather than two menus per heading.
   The reference splits each list across two hand-maintained menus, so
   adding one product means rebalancing both by hand in wp-admin. One
   menu in two CSS columns fills top-to-bottom the same way and
   rebalances itself, which means the client only ever edits a single
   list in Appearance -> Menus.

   break-inside:avoid is load-bearing, not polish: without it a
   two-line item splits across the column boundary and renders as two
   unrelated half-links. */
.gps-ftr__menu{
  margin:0;padding:0;list-style:none;
  columns:2;
  column-gap:var(--sp-6);
}
.gps-ftr__menu > li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;   /* Safari still needs the prefix */
}

/* inline-flex so the hit box hugs its label instead of spanning the
   whole column and reporting a hover state whose edge the reader
   cannot see. The 44px floor still holds on both axes. */
.gps-ftr__menu a{
  display:inline-flex;align-items:center;
  min-height:2.75rem;min-width:2.75rem;
  padding-block:var(--sp-1);
  overflow-wrap:anywhere;
}
.gps-ftr__menu .current-menu-item > a{
  color:var(--gps-yellow);
  font-weight:var(--fw-bold);
}

/* ---------- Widget area ----------
   Light touch on purpose: the contents are whatever the client drops
   in, so this matches the heading to the ones we author and otherwise
   stays out of the way. */
.gps-ftr__widgets{min-width:0;margin-top:var(--sp-7)}
.gps-ftr__widgets .widget + .widget{margin-top:var(--sp-6)}
.gps-ftr__widgets .widget-title{
  margin:0 0 var(--sp-4);
  font-family:var(--font-head);
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-wide);
  line-height:var(--lh-head);
  text-transform:uppercase;
  color:var(--gps-white);
}
.gps-ftr__widgets ul{margin:0;padding:0;list-style:none}
.gps-ftr__widgets li > a{
  display:inline-flex;align-items:center;
  min-height:2.75rem;min-width:2.75rem;
  overflow-wrap:anywhere;
}

/* ============================================================
   Band 3 — Credentials
   ============================================================ */

.gps-ftr__certs-inner{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;
  gap:var(--sp-5) var(--sp-8);
  padding-block:var(--sp-6);
  text-align:center;
}

.gps-ftr__certs-title{
  margin:0;
  font-family:var(--font-head);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:var(--tr-caps);
  text-transform:uppercase;
  color:var(--grey-300);
}

.gps-ftr__cert-list{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;
  gap:var(--sp-5) var(--sp-7);
  margin:0;padding:0;list-style:none;
}

.gps-ftr__cert{
  display:flex;align-items:center;gap:var(--sp-3);
  min-width:0;
}

/* A credential with a Certificate link set wraps its mark and name in an
   anchor, and that anchor is then the <li>'s only flex child — so it has
   to carry the row layout itself. Without this the linked credentials in
   a strip would sit differently from the unlinked ones beside them. */
.gps-ftr__cert-link{
  display:flex;align-items:center;gap:var(--sp-3);
  min-width:0;
  text-decoration:none;
}
.gps-ftr__cert-link:hover .gps-ftr__cert-name,
.gps-ftr__cert-link:focus-visible .gps-ftr__cert-name{text-decoration:underline}

/* Sized here rather than through .gps-ico: a credential mark is
   content, not an affordance glyph, and it reads as an afterthought at
   18px next to a 14px label. */
.gps-ftr__cert-ico{
  width:2rem;height:2rem;flex:none;
  fill:none;stroke:var(--gps-yellow);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

/* A client-uploaded certificate image, when one replaces the glyph.
   Capped by height so marks of different ratios line up on one row. */
.gps-ftr__cert-img{
  width:auto;height:2.75rem;flex:none;
}

.gps-ftr__cert-name{
  min-width:0;
  font-weight:var(--fw-med);
  color:var(--grey-300);
  overflow-wrap:anywhere;
}

/* ============================================================
   Band 4 — Legal bar
   ============================================================ */

.gps-ftr__base-inner{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  gap:var(--sp-2) var(--sp-6);
  padding-block:var(--sp-3);
}

/* The copyright line is wp_kses_post, so it can legitimately carry a
   link. An inline link inside a paragraph has no list or nav to
   distinguish it, so it gets an underline; the footer's other links do
   not need one, and 1.4.1 is satisfied either way. */
.gps-ftr__copy{
  margin:0;min-width:0;
  color:var(--grey-300);
  overflow-wrap:anywhere;
}
.gps-ftr__copy a{text-decoration:underline;text-underline-offset:.2em}

.gps-ftr__base-end{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-2) var(--sp-6);
  min-width:0;
}

.gps-ftr__legal{min-width:0}
.gps-ftr__legal-menu{
  display:flex;flex-wrap:wrap;
  gap:0 var(--sp-6);
  margin:0;padding:0;list-style:none;
}
.gps-ftr__legal-menu a{
  display:inline-flex;align-items:center;
  min-height:2.75rem;min-width:2.75rem;
  color:var(--grey-300);
  overflow-wrap:anywhere;
}

.gps-ftr__social{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-2);
  margin:0;padding:0;list-style:none;
}
/* Square 44px targets. The icon is 18px, so the padding is what makes
   the target, not the glyph. */
.gps-ftr__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;
}

/* ============================================================
   Breakpoints

   The ladder is the canonical one declared at the top of base.css:
   range syntax, (width < 64rem) / (width < 48rem) / (width < 30rem),
   which meets the matching >= queries exactly with no 1px dead band.
   ============================================================ */

/* Tablet and below. Both 1fr/2fr splits collapse: at 1023px the brand
   track is ~300px, which is under the 46ch the blurb is set to and
   turns it into a column of four-word lines. The two menu groups stay
   side by side but each drops to a single internal column -- 4 link
   columns in ~640px is ~150px per column, where most product names
   wrap to two lines. */
@media (width < 64rem){
  .gps-ftr__reach-inner,
  .gps-ftr__main-inner{
    grid-template-columns:minmax(0,1fr);
    gap:var(--sp-7);
  }

  /* The accent bar moves to the top edge: a left border on a
     full-width block reads as an indent, not an accent. */
  .gps-ftr__news{
    border-left:0;
    border-top:var(--sp-1) solid var(--gps-yellow);
    padding-left:0;
    padding-top:var(--sp-5);
  }

  /* Accordion mode. assets/js/footer.js collapses each group behind its
     heading from here down, so the groups need to read as rows: a rule
     above each one, and one under the whole stack. That pair works in
     both arrangements -- two groups side by side between 48 and 64rem,
     and one above the other below it. */
  .gps-ftr__menus{
    gap:0 var(--sp-6);
    border-bottom:1px solid var(--grey-600);
  }
  .gps-ftr__menu-group{
    border-top:1px solid var(--grey-600);
    padding-block:var(--sp-2);
  }
  .gps-ftr__head{margin-bottom:0}
  .gps-ftr__menu{columns:1;padding-block:var(--sp-2)}
}

/* Phones. The menu groups stop sharing a row -- two 150px columns of
   product names is the same wrapping problem one breakpoint up. Each
   list goes back to two internal columns instead, which halves the
   scroll depth of a 13-item list without narrowing it as far. */
@media (width < 48rem){
  /* The two groups stop sharing a row. Their disclosure chrome is
     already set one breakpoint up and carries over unchanged. */
  .gps-ftr__menus{grid-template-columns:minmax(0,1fr)}

  .gps-ftr__certs-inner{
    flex-direction:column;
    gap:var(--sp-4);
  }

  /* The bar stops trying to sit on one line. */
  .gps-ftr__base-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-3);
  }
  .gps-ftr__base-end{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-2);
  }

  /* Full-width submit. A 320-375px viewport cannot hold a 16rem field
     and a 12rem button on one row, and the flex-wrap fallback leaves
     the button hanging at its intrinsic width against the left edge. */
  .gps-ftr__input,
  .gps-ftr__submit{flex:1 1 100%}
}

/* Small phones. At 320 the content box is 280px, so a two-column link
   list gives each column 124px -- narrower than "Generators &" alone.
   The legal links stop sharing a row for the same reason: a wrapped
   row of 44px targets reads as a broken line rather than a list, and
   stacking guarantees they never sit within 44px of each other. */
@media (width < 30rem){
  .gps-ftr__reach-inner,
  .gps-ftr__main-inner{padding-block:var(--sp-7)}
  .gps-ftr__legal-menu{flex-direction:column;gap:0}
  .gps-ftr__cert{align-items:flex-start}
}

/* The newsletter fallback: an anchor standing in for the submit button when
   no provider shortcode and no endpoint are configured. It has to match
   .gps-ftr__submit exactly -- same box, same weight -- because it sits in the
   same slot, and an underlined blue link where a button belongs is the kind of
   detail that makes a finished site look half-built. inline-flex because an
   anchor has no intrinsic button box to inherit. */
.gps-ftr__news-fallback{margin:0}
.gps-ftr__submit--link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}