/*
Theme Name: CogniPrism
Theme URI: https://cogniprism.com
Description: CogniPrism child theme built on Twenty Twenty-Five. Brand colours, type scale and spacing live in theme.json. The design systems live in assets/css and are loaded by functions.php in their required order.
Author: CogniPrism
Template: twentytwentyfive
Version: 2.1
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: cogniprism
*/

/* ==========================================================================
   This file is near-empty by design.

   Colours, fonts and spacing        -> theme.json
   Icons, surfaces, cards,
   emphasis, heroes, clients, nav    -> assets/css/

   Only rules that belong to no single system live here.
   ========================================================================== */


/* --------------------------------------------------------------------------
   .wrap  —  the shared content container

   Every section in the design systems wraps its content in <div class="wrap">.
   The rule was defined inside the preview HTML files and never made it into the
   exported stylesheets, so the class arrived on the site referenced by two hero
   grid rules and otherwise undefined. Without this, every system section runs
   edge to edge with no content constraint.

   The width reads from theme.json rather than being typed in, so wrap-based
   sections and WordPress's own alignwide blocks line up on the same edges. The
   header and footer use alignwide; page sections use .wrap. If those two
   disagreed, the logo and the content beneath it would sit on different left
   edges by a visible margin.

   1180px was the figure in the preview files. It is not used here, because
   matching the header matters more than matching the preview.
   -------------------------------------------------------------------------- */

.wrap {
  max-width: calc(var(--wp--style--global--wide-size, 1200px) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: content-box;
}

@media (max-width: 600px) {
  .wrap {
    padding-inline: 20px;
  }
}


/* --------------------------------------------------------------------------
   Custom HTML blocks

   System sections are pasted into Custom HTML blocks, which WordPress wraps in
   its own constrained container. That container would clamp a full-bleed canvas
   to the content width and undo the section's background. Setting the wrapper
   to full width lets the section decide its own edges, which is what the
   surface system expects.
   -------------------------------------------------------------------------- */

.wp-block-html:has(> .cp-hero),
.wp-block-html:has(> section) {
  max-width: none;
  width: 100%;
}

/* --------------------------------------------------------------------------
   .sec  —  the shared section rhythm

   Same story as .wrap. The systems assume a section wrapper carrying vertical
   padding, defined in the preview files as 56px top and bottom and never
   exported. Heroes carry their own padding and do not need this.

   Both .cp-sec and .sec are supported. The guides use .sec; the cp- prefix is
   safer on a WordPress site where a bare class name could collide with a
   plugin. Either works, so nothing already written has to be revised.
   -------------------------------------------------------------------------- */

.cp-sec,
.sec {
  padding-block: 56px;
}

@media (max-width: 700px) {
  .cp-sec,
  .sec {
    padding-block: 40px;
  }
}

/* ==========================================================================
   Integration fixes

   Everything below reconciles the design systems with WordPress. These are not
   corrections to the systems; each one is a place where an assumption that held
   in a standalone HTML file stops holding inside a block theme.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Release sections from the content width

   The Custom HTML block leaves no wrapper on the front end. The raw markup
   becomes a direct child of the post content, and WordPress's constrained
   layout clamps every direct child to contentSize. A canvas section clamped to
   720px is a coloured card floating in Ivory, not a canvas.

   Two rules, deliberately separate. The first releases the width. The second
   pulls the section back out through the root padding, and only fires when the
   parent actually has that padding. Applying the negative margin
   unconditionally would push sections past the viewport and create a
   horizontal scrollbar on pages where the padding is not there.
   -------------------------------------------------------------------------- */

.is-layout-constrained > .cp-hero,
.is-layout-constrained > .cp-sec,
.is-layout-constrained > .sec {
  max-width: none;
  width: auto;

  /* Cancels the root padding. .has-global-padding sits on an ancestor group
     rather than the direct parent in this theme, so gating on it never fired
     and a 24px strip of page background stayed visible down both sides. */
  margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
  margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);

  /* blockGap puts 24px between sibling blocks. Between canvases that gap shows
     as a band of the page background, which breaks the join the surface system
     depends on: Champagne meeting Ivory under continuous grain only works if
     the two actually touch. */
  margin-block: 0;
}


/* --------------------------------------------------------------------------
   2. Icon stroke and fill

   The source icons carry fill="none" stroke="currentColor" stroke-width="2" on
   the <svg> root. Building a sprite moves the artwork into <symbol> elements
   and those root attributes do not travel with it, so every mark arrives with
   the SVG defaults: black fill, no stroke. Line icons render as silhouettes.

   Restoring them in CSS rather than editing the sprite keeps one source of
   truth and survives a sprite rebuild.

   The accent element is exempted by attribute rather than by tag, because the
   accent is a circle in some marks and a path in others. Anything the sprite
   gave an explicit fill keeps it.
   -------------------------------------------------------------------------- */

.cp-domain,
.cp-icon > svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cp-domain [fill]:not([fill="none"]),
.cp-icon [fill]:not([fill="none"]) {
  fill: var(--cp-accent, #64C9CE);
  stroke: none;
}

/* The artwork asks for --cp-icon-accent. The icon system defines --cp-accent.
   Mapping one to the other is what makes .cp-accent-magenta reach the marks;
   without it every accent falls back to the hardcoded Robin Egg in the sprite
   and the Magenta context is silently ignored. */
:root {
  --cp-icon-accent: var(--cp-accent, #64C9CE);
}


/* --------------------------------------------------------------------------
   3. Image frame proportions

   .cp-frame sets height:100% so it can fill a sized container. Placed directly
   in a grid or flex row it stretches to the tallest sibling instead, and
   aspect-ratio never gets to speak. Four frames locked to three different
   ratios then render at one identical height, which is the opposite of the
   point.

   height:auto lets aspect-ratio drive. Inside a container that sets its own
   height, add .cp-frame--fill to restore the original behaviour.
   -------------------------------------------------------------------------- */

/* img.cp-frame, not .cp-frame. The emphasis system sets height:100% and loads
   after this file, so a bare class selector ties on specificity and loses on
   order. Adding the element name wins without needing !important. */
img.cp-frame {
  height: auto;
  align-self: start;
}

img.cp-frame--fill {
  height: 100%;
}


/* --------------------------------------------------------------------------
   4. Stat spacing inside the grid

   .cp-stat + .cp-stat carries a 32px top margin, written for stats stacked in a
   column. Inside .cp-stats the same rule fires on the second and third grid
   items and drops them below the first, so a row of three reads as a staircase.
   -------------------------------------------------------------------------- */

.cp-stats > .cp-stat + .cp-stat,
.cp-stats--2 > .cp-stat + .cp-stat {
  margin-top: 0;
}


/* Close the block-gap strip between the page content and the footer */
.wp-site-blocks > :last-child { margin-block-start: 0 !important; }