/* ============================================================
   CricoSoft — WordPress bridge
   Load order: 1 tokens > 2 base > 3 components > 4 mockups >
               5 sections > [6 wordpress]

   THIS FILE IS THE ONLY ONE THAT DID NOT EXIST ON THE STATIC SITE.

   It exists because Core Blocks bring markup the design never had: an
   extra wrapper here, a <ul> where there was a <div>, a rule at three
   classes of specificity that beats a component's own. Everything here
   reconciles one of those. Nothing here changes the design.

   Two rules for anything added below:

     1. Say which Core behaviour it answers. A rule whose reason is not
        written down is a rule nobody can safely delete later.
     2. Never redesign. If a value here is not already in the static
        CSS or derived from a token, it is a bug.

   It must load AFTER wp-block-library and global-styles, which
   inc/enqueue.php guarantees by adding them as dependencies.
   ============================================================ */


/* ------------------------------------------------------------
   1. Utility classes replacing inline custom properties

   The static site wrote reveal delays as style="--reveal-delay:80ms".
   A Core block cannot carry an arbitrary custom property in its style
   attribute — the editor drops it on save — so the handful of values
   the design actually uses become classes. These are the only ones
   used; do not add a scale.
   ------------------------------------------------------------ */

.cricosoft-delay-80  { --reveal-delay:  80ms; }
.cricosoft-delay-120 { --reveal-delay: 120ms; }
.cricosoft-delay-160 { --reveal-delay: 160ms; }
.cricosoft-delay-560 { --reveal-delay: 560ms; }

/* The static site centred three eyebrows with style="justify-content:center".
   Same reason as above. */
.cricosoft-eyebrow--center {
  display: flex;
  justify-content: center;
}


/* ------------------------------------------------------------
   2. Core's layout wrappers

   Every Group renders an extra <div class="wp-block-group">. Where the
   design put a grid or flex container directly around its items, that
   wrapper becomes the single child and the gap stops applying.
   display: contents removes the wrapper from layout without removing
   it from the DOM.
   ------------------------------------------------------------ */

/* post-terms and post-date inside the card meta row: each renders its own
   wrapper, which would make the flex row one item wide. */
.cricosoft-post-card__meta > .wp-block-post-terms,
.cricosoft-post-card__meta > .wp-block-post-date,
.cricosoft-article__meta > .wp-block-post-date,
.cricosoft-article__meta > .wp-block-post-author-name {
  display: contents;
}

/* core/post-excerpt wraps its text in <div><p>. The card text styles the
   paragraph, so the wrapper has to disappear from layout. */
.cricosoft-card__text,
.cricosoft-product__text,
.cricosoft-post-card__excerpt,
.cricosoft-page-hero__lede {
  display: block;
}

.cricosoft-card__text p,
.cricosoft-product__text p,
.cricosoft-post-card__excerpt p,
.cricosoft-page-hero__lede p {
  margin: 0;
  color: inherit;
  font: inherit;
}

/* The mark rows and the contact "answer" line are flex containers whose
   label is a core/paragraph. A paragraph has no margin in this design,
   but Core's flow layout can still put one back. */
.cricosoft-mark > p,
.cricosoft-question__answer > p,
.cricosoft-contact-card__text > p,
.cricosoft-product-more > p {
  margin: 0;
}

/* The icon block renders <span class="wp-block-cricosoft-icon">. Where the
   design styled the <svg> itself, the span has to not interrupt the flex
   row it now sits in. */
.wp-block-cricosoft-icon {
  display: inline-flex;
  flex: none;
  line-height: 0;
}


/* ------------------------------------------------------------
   3. Core's first-child margin reset

   .wp-block-group-is-layout-flow > :first-child { margin-block-start: 0 }
   is two classes and beats a component's own rule. Every deliberate
   top margin in this design was checked against it; these are the two
   that land on a first child.
   ------------------------------------------------------------ */

.wp-block-group.cricosoft-article__body,
.cricosoft-card__foot {
  margin-block-start: revert;
}

.cricosoft-card__foot { margin-top: auto; }


/* ------------------------------------------------------------
   4. Core's navigation colour

   .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-link__content
   { color: inherit } is three classes and beats .cricosoft-nav__link,
   its :hover and its [aria-current]. All three are restated at
   matching specificity rather than with !important.
   ------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item__content.cricosoft-nav__link {
  color: var(--cricosoft-fg-muted);
}

.wp-block-navigation .wp-block-navigation-item__content.cricosoft-nav__link:hover,
.wp-block-navigation .wp-block-navigation-item__content.cricosoft-nav__link:focus-visible {
  color: var(--cricosoft-fg);
}

.wp-block-navigation .wp-block-navigation-item__content.cricosoft-nav__link[aria-current="page"] {
  color: var(--cricosoft-fg);
}

/* The drawer link is a flex row — label left, arrow right — and Core's
   .wp-block-navigation .wp-block-navigation-item__content is two classes,
   so its display:block wins over .cricosoft-drawer__link. The arrow then
   wrapped onto its own line and every row grew from 44px to 60px, which
   pushed a fifth link below the fold on a landscape phone. Restated here at
   matching specificity rather than with !important. */
.wp-block-navigation .wp-block-navigation-item__content.cricosoft-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cricosoft-space-3);
  color: var(--cricosoft-fg);
}

/* Core gives the navigation its own flex container and gap. The design's
   nav sets both; Core's container is the one that renders. */
.cricosoft-nav .wp-block-navigation__container,
.cricosoft-drawer__nav .wp-block-navigation__container {
  display: flex;
  gap: inherit;
  align-items: inherit;
  flex-direction: inherit;
  width: 100%;
}

.cricosoft-drawer__nav,
.cricosoft-drawer__nav .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch;
}

/* Core's navigation-item is a <li>; the design styled the <a> directly. */
.cricosoft-nav .wp-block-navigation-item,
.cricosoft-drawer__nav .wp-block-navigation-item {
  display: flex;
}

.cricosoft-drawer__nav .wp-block-navigation-item { display: block; }


/* ------------------------------------------------------------
   5. Query Loop lists

   core/post-template renders a <ul>. The design's containers were
   <div> and <article>, so the list semantics have to be neutralised
   without touching the grid the class sets up.
   ------------------------------------------------------------ */

.wp-block-post-template.cricosoft-posts,
.wp-block-post-template.cricosoft-carousel,
.wp-block-post-template.cricosoft-products-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The carousel bleeds to the viewport edges, and that margin is the one
   the list reset above must not eat. */
.wp-block-post-template.cricosoft-carousel {
  margin-inline: calc(var(--cricosoft-gutter) * -1);
  padding-inline: var(--cricosoft-gutter);
}

/* The products page stacks its sections; the gap is the section rhythm,
   because on the static site each product WAS a section. */
.cricosoft-products-list {
  display: grid;
  gap: var(--cricosoft-section-y);
}

/* The Query Loop's own wrapper must not interrupt the grid above it. */
.cricosoft-shell > .wp-block-query,
.cricosoft-products-page .wp-block-query {
  display: block;
}


/* ------------------------------------------------------------
   6. Buttons

   inc/block-bridge.php does the real work here: it moves the
   cricosoft-* classes from the Core button's wrapper onto the <a>, and
   removes .wp-block-button__link and .wp-element-button so Core's own
   button rules stop matching. See the comment there for why that is
   preferable to restating the design system at a higher specificity.

   What is left is Core's wrapper, which must not paint or size, because
   the <a> inside it is now the whole button.
   ------------------------------------------------------------ */

.wp-block-buttons > .wp-block-button {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

/* The design's own action rows set their gap; Core's buttons layout would
   otherwise impose its 0.5em default on top. */
.cricosoft-hero__actions.wp-block-buttons,
.cricosoft-cta__actions.wp-block-buttons,
.cricosoft-header__cta-wrap.wp-block-buttons,
.cricosoft-drawer__foot .wp-block-buttons {
  display: flex;
  gap: inherit;
}

.cricosoft-drawer__foot .wp-block-buttons {
  flex-direction: column;
  gap: var(--cricosoft-space-3);
  width: 100%;
}

.cricosoft-drawer__foot .wp-block-button { width: 100%; }


/* ------------------------------------------------------------
   7. Site logo and title

   core/site-logo renders <div><a><img>>; core/site-title renders a <p>
   or heading with an <a> inside. The design styled an <img> and a
   <span> inside one <a class="cricosoft-brand">.
   ------------------------------------------------------------ */

.cricosoft-brand .wp-block-site-logo,
.cricosoft-brand .wp-block-site-title {
  margin: 0;
  line-height: 1;
}

.cricosoft-brand .wp-block-site-logo img {
  width: 2rem;
  height: 2rem;
  display: block;
}

.cricosoft-brand .wp-block-site-title {
  font-family: var(--cricosoft-font-display);
  font-weight: 700;
  font-size: var(--cricosoft-text-md);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cricosoft-brand .wp-block-site-title a { color: var(--cricosoft-fg); }
.cricosoft-brand .wp-block-site-title a:hover { color: var(--cricosoft-fg); }

/* The wordmark bridge rebuilds Crico<span>Soft</span> from the site name. */
.cricosoft-brand .wp-block-site-title span { color: var(--cricosoft-brand-ink); }


/* ------------------------------------------------------------
   8. Social links

   core/social-links renders <ul><li class="wp-social-link"><a>. The
   design had three bare <a class="cricosoft-icon-btn">. The bridge
   swaps Core's artwork for the sprite and adds the class; the list
   scaffolding is neutralised here.
   ------------------------------------------------------------ */

.cricosoft-footer__social.wp-block-social-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cricosoft-footer__social .wp-social-link {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.cricosoft-footer__social .wp-social-link a {
  padding: 0;
  line-height: 0;
}


/* ------------------------------------------------------------
   9. Stat values

   The design used <span class="cricosoft-stat__value">; core/paragraph
   renders a <p>. The bridge reads the number out of either, but the
   block box differs.
   ------------------------------------------------------------ */

p.cricosoft-stat__value,
p.cricosoft-stat__label {
  margin: 0;
  display: block;
}


/* ------------------------------------------------------------
   10. Form scaffolding

   The static form used a <fieldset> with inline styles to strip the
   browser's default chrome. Those become classes here so the block's
   markup carries none.
   ------------------------------------------------------------ */

.cricosoft-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* Firefox: a fieldset refuses to shrink without this. */
}

.cricosoft-fieldset__legend {
  margin-bottom: var(--cricosoft-space-3);
  padding: 0;
}


/* ------------------------------------------------------------
   11. Editorial odds and ends

   Small classes the WordPress markup needs and the static page did
   with an inline style or a hand-written element.
   ------------------------------------------------------------ */

.cricosoft-article__sep {
  margin: 0;
  color: var(--cricosoft-fg-subtle);
}

.cricosoft-contact__panel-title {
  font-size: var(--cricosoft-text-xl);
  margin-bottom: var(--cricosoft-space-6);
}

.cricosoft-notfound__lede {
  margin: var(--cricosoft-space-4) auto var(--cricosoft-space-8);
}

.cricosoft-product__cta { margin-top: var(--cricosoft-space-6); }

.cricosoft-product__prose { margin-top: var(--cricosoft-space-4); }

/* The featured image is optional: on the static site every post card used
   an icon tile. A post with no image simply has no cover. */
.cricosoft-post-card__cover.wp-block-post-featured-image {
  margin: 0;
}

.cricosoft-post-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ------------------------------------------------------------
   12. Server-paged listings

   The blog page pages in the browser. The category archive and the
   search results cannot — they are server-paged — so Core's pagination
   block is given the site's pager appearance rather than a second
   design.
   ------------------------------------------------------------ */

.cricosoft-pagination--server {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cricosoft-space-2);
  margin-top: var(--cricosoft-space-10);
}

.cricosoft-pagination--server .wp-block-query-pagination-previous,
.cricosoft-pagination--server .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: var(--cricosoft-space-2);
  min-height: 2.75rem;
  padding-inline: var(--cricosoft-space-4);
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius-sm);
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
}

.cricosoft-pagination--server .wp-block-query-pagination-numbers {
  display: flex;
  gap: var(--cricosoft-space-1);
}

.cricosoft-pagination--server .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--cricosoft-line);
  border-radius: var(--cricosoft-radius-sm);
  color: var(--cricosoft-fg-muted);
  font-size: var(--cricosoft-text-sm);
  font-weight: 600;
}

.cricosoft-pagination--server .page-numbers.current {
  background: var(--cricosoft-brand-500);
  border-color: var(--cricosoft-brand-500);
  color: #FFFFFF;
}


/* ------------------------------------------------------------
   13. Search form

   Used on the 404 page and above the search results. core/search
   renders its own wrapper, input and button.
   ------------------------------------------------------------ */

.cricosoft-search {
  max-width: 26rem;
  margin-inline: auto;
  margin-top: var(--cricosoft-space-8);
}

/* The form must be able to shrink.
   .cricosoft-notfound is a centred grid, so its track is sized to the
   content's max-content rather than stretched. core/search lays the input
   and button out in a nowrap flex row whose min-content came to 338px —
   18px wider than a 320px screen — and the whole page scrolled sideways.
   The input needs min-width:0 to be allowed to shrink at all, and the row
   needs to be able to wrap once there is no space left. */
.cricosoft-search .wp-block-search__inside-wrapper {
  flex-wrap: wrap;
  gap: var(--cricosoft-space-2);
}

.cricosoft-search .wp-block-search__input {
  min-width: 0;
  flex: 1 1 9rem;
  min-height: 2.75rem;
  padding: var(--cricosoft-space-3) var(--cricosoft-space-4);
  border: 1px solid var(--cricosoft-line-strong);
  border-radius: var(--cricosoft-radius-sm);
  background: var(--cricosoft-surface-1);
  color: var(--cricosoft-fg);
  font: inherit;
}

.cricosoft-search .wp-block-search__button {
  min-height: 2.75rem;
  padding-inline: var(--cricosoft-space-5);
  border: none;
  border-radius: var(--cricosoft-radius-sm);
  background: var(--cricosoft-brand-500);
  color: #FFFFFF;
  font-weight: 600;
  cursor: pointer;
}


/* ------------------------------------------------------------
   14. Admin bar

   WordPress offsets <html> by its own height, which breaks a header
   pinned to the top of the viewport for a logged-in editor only.
   ------------------------------------------------------------ */

.admin-bar .cricosoft-header { top: 32px; }
.admin-bar .cricosoft-drawer { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .cricosoft-header { top: 46px; }
  .admin-bar .cricosoft-drawer { top: 46px; }
}

/* ------------------------------------------------------------
   15. Contact form: the parts that only exist on a server

   The static site's form had nowhere to send anything, so three
   states never existed there: a honeypot, a failed send, and a
   submit button waiting on a response. None of them change the
   design — they reuse the field error colour and the existing
   status panel — they only give those three states somewhere to
   live.
   ------------------------------------------------------------ */

/* The honeypot. Not display:none: some bots skip hidden fields, and
   a few browsers skip them on autofill too. Taken out of the flow
   and out of the accessibility tree instead, which no human can
   reach and no assistive technology announces. */
.cricosoft-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A failed send reuses the field error colour rather than inventing
   a palette entry, so the two error states on the page agree. */
.cricosoft-form__status.is-error {
  border-color: light-dark(#B32424, #FF8F8F);
  background: light-dark(#B324240F, #FF8F8F14);
}

.cricosoft-form__status.is-error .cricosoft-icon {
  color: light-dark(#B32424, #FF8F8F);
}

/* Waiting on the server. The button keeps its size so the layout
   does not jump while the request is in flight. */
.cricosoft-btn[aria-busy='true'] {
  opacity: 0.65;
  cursor: progress;
}

.cricosoft-btn[aria-busy='true'] .cricosoft-btn__icon {
  animation: cricosoft-btn-busy 0.9s linear infinite;
}

@keyframes cricosoft-btn-busy {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cricosoft-btn[aria-busy='true'] .cricosoft-btn__icon { animation: none; }
}

/* ------------------------------------------------------------
   16. Footer legal links

   A row that only exists once the site has a privacy policy, so
   it has to drop into the existing footer base without moving
   anything. .cricosoft-footer__bottom is a space-between flex
   row of two items; this becomes a third, and the copyright and
   the social icons keep the ends.
   ------------------------------------------------------------ */

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

/* The 24px minimum target applies here too: these sit in a dense
   row and are the smallest text on the page. */
.cricosoft-footer__legal .cricosoft-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* On a phone the base row already wraps to one item per line, so
   the legal links centre with the rest rather than hugging one
   edge on their own line. */
@media (max-width: 640px) {
  .cricosoft-footer__legal { justify-content: center; width: 100%; }
}