/*
  SurgePays Corporate (surgepays.com)
  wp-blocks.css: the WordPress layer. Loaded after site.css, on the site and in the block editor.

  site.css is the stylesheet of the static build, copied without edits. It styles the design by class
  name (.hero, .btn, .card and so on). The patterns of this theme put those class names on core blocks.
  Core blocks add a few wrapper elements and classes of their own. This file maps those to the design,
  and does nothing else. It adds no new look to the five designed pages.

  Rule for this file: no values of the design are repeated here unless a line says why.
  Colors, sizes and spacing stay in site.css.

  Breakpoints are the ones of site.css, section 9 (theme.json has no field for them):
    max-width 1119px   the surge path diagrams become stacked cards
    max-width 919px    one column, and the navigation becomes the Menu button
    701px to 919px     the hero keeps its two columns
    max-width 700px    phone layout
    max-width 520px    smallest phones

  Contents
    W1  Page shell: template part wrapper, admin bar
    W2  Button block: classes sit on the wrapper, the link fills it
    W3  Image block: the figure steps aside where the design places the img itself
    W4  Text blocks: bold is "strong" in the editor, the design styles "b"
    W5  Footer photo: the caption of the Image block
    W6  Generic pages and posts (not part of the approved design)

  Blocks that need no rule here, because their markup already matches what site.css expects:
  Group, Heading, Paragraph, List and every theme block.
*/

/* ============================================================================
   W1. Page shell
   ============================================================================ */

/* The header template part wraps the header in one extra element. A sticky element only sticks inside
   its parent, so the wrapper is taken out of the layout and the header sticks to the page again. */
.wp-site-blocks > .wp-block-template-part:has(> .hdr) {
  display: contents;
}

/* Signed-in users see the WordPress admin bar on top. The sticky header sits under it. */
.admin-bar .hdr {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + env(safe-area-inset-top, 0px));
}

@media (max-width: 600px) {
  /* At this width the admin bar scrolls away with the page. */
  .admin-bar .hdr {
    top: env(safe-area-inset-top, 0px);
  }
}

/* ============================================================================
   W2. Button block
   Static build:   <a class="btn ghost" href>Label <span class="arr">↗</span></a>  inside  <div class="btns">
   Button block:   <div class="wp-block-button btn ghost"><a class="wp-block-button__link" href>Label <span class="arr">↗</span></a></div>
                   inside <div class="wp-block-buttons btns">
   The design classes (btn, ghost, light, link) are typed on the Button block under
   Advanced, Additional CSS class(es). They land on the wrapper, so site.css draws the button there.
   The link inside is reset and stretched over the whole wrapper, so all of the button can be clicked.
   ============================================================================ */

/* A Buttons block without the class "btns" is only a holder: its buttons act as if they stood alone.
   This is how a single text link (class "link") sits in a card or a stack. */
.wp-block-buttons:not(.btns) {
  display: contents;
}

/* WordPress centers the buttons of a row on each other. The design does not set that for ".btns",
   so it is put back to the browser default. ".btns.btns-center" in site.css still wins. */
:where(.wp-block-buttons).btns {
  align-items: normal;
}

/* Core sets display:inline-block on the wrapper. The design needs the display of .btn and .link back. */
.wp-block-buttons > .wp-block-button.btn,
.wp-block-buttons > .wp-block-button.link {
  display: inline-flex;
  position: relative;
}

/* The link inside carries no look of its own. It lays out the label and its arrow the way the
   wrapper would: "gap: inherit" takes the gap that site.css gives .btn (8px) and .link (6px). */
.wp-block-button.btn > .wp-block-button__link,
.wp-block-button.link > .wp-block-button__link {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: inherit;
  cursor: pointer;
}

/* The link covers the wrapper, so the padding of the button is part of the click target. */
.wp-block-button.btn > .wp-block-button__link::before,
.wp-block-button.link > .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Keyboard focus: the ring of site.css, drawn around the whole button.
   THE VALUES ARE COPIED from site.css, section 2, ":focus-visible". If they change there, change them here. */
.wp-block-button.btn:has(> .wp-block-button__link:focus-visible),
.wp-block-button.link:has(> .wp-block-button__link:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.wp-block-button.link:has(> .wp-block-button__link:focus-visible) {
  border-radius: 6px;
}

/* ============================================================================
   W3. Image block
   Static build:   <img class="hero-art"> is a cell of the hero grid, <img> is a cell of a person card.
   Image block:    <figure class="wp-block-image"><img class="hero-art"></figure>
   In these two places the figure is taken out of the layout, so the img is the grid cell and is sized
   and placed by site.css exactly as in the static build. Images anywhere else keep the normal figure.
   (The classes photo, ar169, ar11, hero-art and lg are moved from the figure to the img when the page
   is printed. See inc/render-filters.php.)
   ============================================================================ */
.hero-grid > .wp-block-image,
.person > .wp-block-image {
  display: contents;
}

/* ============================================================================
   W4. Text blocks
   The editor writes bold as <strong>. The design styles <b> in three places. These selectors give
   <strong> the same rules there, so text can be made bold with the normal Bold button.
   THE VALUES ARE COPIED from site.css: section 3 ".lead b", section 5.6 ".card p b" and section 8
   "address b". If they change there, change them here.
   ============================================================================ */
.lead strong,
.card p strong {
  font-weight: 600;
  color: var(--ink);
}

address strong {
  color: var(--ink);
}

/* ============================================================================
   W5. Footer photo
   The line on the photo is the caption of the Image block. WordPress gives every image caption a
   margin above and below. The design places this caption itself (site.css, section 7), so the margin
   is taken off.
   ============================================================================ */
.ftr .ftr-shot figcaption {
  margin-block: 0;
}

/* ============================================================================
   W6. Generic pages and posts
   NOT PART OF THE APPROVED DESIGN. The mockup has five pages and no plain text page.
   These rules give the default templates (page.html, single.html, index.html, archive.html, 404.html)
   a readable column built from the same tokens, so pages such as a privacy policy have a home.
   Confirm with marketing before launch.
   ============================================================================ */
.entry {
  max-width: 46rem;
}

.entry > h1 {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.entry > .eyebrow {
  margin-bottom: 12px;
}

.entry > * + .btns {
  margin-top: 24px;
}

/* The text rules below are for plain text pages. They leave out ".is-sections", the content of a page
   made with the template "Page built from sections": there the sections bring their own spacing,
   lists and links, exactly as on the five designed pages. */
.entry-content:not(.is-sections) > * + * {
  margin-top: 1.1em;
}

.entry-content:not(.is-sections) > :is(h2, h3, h4) {
  margin-top: 1.6em;
}

.entry-content:not(.is-sections) :is(ul, ol):not([class]),
.entry-content:not(.is-sections) :is(ul, ol).wp-block-list:not(.pills, .stack) {
  padding-left: 1.4em;
  list-style: revert;
}

.entry-content:not(.is-sections) a:not(.link, .wp-block-button__link) {
  color: var(--blue-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A list of WordPress posts in the look of a news list (templates/index.html, templates/archive.html). The site itself has no news list: news lives on Investor Relations. */
.news .wp-block-post-title a:hover {
  color: var(--blue-text);
}

.wp-block-query-pagination {
  display: flex;
  gap: 24px;
  font-weight: 600;
  color: var(--blue-text);
}

/* ============================================================================
   W7. Contact form: required fields
   NOT PART OF THE APPROVED DESIGN. The mockup checks no field. assets/js/contact-form.js marks a
   required field that is empty, or an email address that is not valid, with aria-invalid, and shows
   the "Missing fields" line in the status line with the class is-error. The red is not a token of
   site.css: #B42318 reads at 4.5:1 or more on white. Confirm with marketing.
   ============================================================================ */
.form [aria-invalid="true"] {
  border-color: #B42318;
}
.form [aria-invalid="true"]:focus {
  outline-color: #B42318;
  border-color: #B42318;
}
.status.is-error {
  color: #B42318;
}