/* ==========================================================================
   ORION — block rhythm
   --------------------------------------------------------------------------
   orion.css is the design system and is left exactly as it was verified. This
   file only handles a problem that is specific to building pages out of blocks.

   In the reference build a single <section> often holds several things: the
   About heading and its copy panel share one section, so they share one set of
   vertical padding. As blocks they are two sections, and the padding doubles —
   which is the too-large gap you see under a heading.

   Rather than give every block a padding setting to get wrong, the rule is
   positional: a section that directly follows another drops its top padding,
   so consecutive blocks read as one composed group. A coloured band is the
   exception — it needs its own breathing room on both sides.
   ========================================================================== */

.o-section + .o-section { padding-top: 0; }

/* Coloured bands and full-bleed sections keep their own spacing. */
.o-stats + .o-section,
.o-cta + .o-section,
.o-hero + .o-section,
.o-who + .o-section,
.o-marquee + .o-section { padding-top: var(--space-xl); }

.o-section + .o-stats,
.o-section + .o-cta { margin-top: var(--space-xl); }

/* A heading block immediately followed by its content is one unit: tighten it
   further than the general rule, matching how the reference build nests them. */
.o-section--tight + .o-section { padding-top: 0; }

/* The block editor renders each block into its own wrapper, which breaks the
   adjacent-sibling rule above. Reach through it so the canvas spacing matches
   the published page. */
.editor-styles-wrapper .wp-block + .wp-block .o-section { padding-top: 0; }
.editor-styles-wrapper .o-hero { min-height: 420px; }

/* A band with a background of its own is a box, not a continuation of the
   section above it: collapsing its top padding pushes its content flush
   against the coloured edge, which is what made the Who We Offer chips sit
   hard against the top of the blue. The collapsing rules above are for
   white-on-white sections; a coloured band opts back out of them. Last in the
   file so it wins against every one of them. */
.o-section + .o-who,
.o-section--tight + .o-who,
.editor-styles-wrapper .wp-block + .wp-block .o-who { padding-top: var(--section-y); }

/* Blocks are top-level; nothing should be able to introduce a horizontal
   scrollbar on a page whose block order we do not control. */
.o-block-root { overflow-x: clip; }

/* --------------------------------------------------------------------------
   The About image, sized by its copy — not the other way round.

   Two earlier attempts got this wrong in opposite directions. Left alone, a
   2:3 portrait photograph in a 600px column is 900px tall and dwarfs the text.
   Stretching both columns fixed that but made the blue panel grow to the
   photograph's height, leaving a large empty area under the copy.

   The mechanism that actually works: the copy panel keeps its natural height
   and decides the row; the photograph is taken out of the flow inside its
   frame, so it contributes no height of its own and simply fills whatever the
   copy left. Writing more text grows the picture; writing less shrinks it. The
   panel is never padded out to match anything.
   -------------------------------------------------------------------------- */
.o-about__grid { align-items: stretch; }
.o-about__grid > * { min-width: 0; }

.o-framedimg {
  display: block;
  position: relative;
  height: 100%;
  min-height: 340px; /* so a one-line paragraph cannot letterbox the photo */
}
.o-framedimg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The offset blue squares are sized from the frame, so they follow it. */
.o-framedimg::before,
.o-framedimg::after { max-width: 62%; max-height: 62%; }

/* Stacked, there is no copy beside the picture to take its height from, so it
   needs a shape of its own. */
@media (max-width: 860px) {
  .o-framedimg--copy { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
}

/* --------------------------------------------------------------------------
   Photograph shape, chosen per block.

   "As tall as the copy" is the behaviour above and suits most pairings. The
   fixed ratios are for when a particular photograph reads better in a
   particular shape — a portrait cropped square, say. "Uncropped" turns the
   trimming off entirely: the whole picture is shown at its own proportions,
   which is the escape hatch when no crop is the right crop.
   -------------------------------------------------------------------------- */
.o-framedimg--square,
.o-framedimg--landscape,
.o-framedimg--wide,
.o-framedimg--portrait {
  height: auto;
  min-height: 0;
}
.o-framedimg--square    { aspect-ratio: 1 / 1; }
.o-framedimg--landscape { aspect-ratio: 4 / 3; }
.o-framedimg--wide      { aspect-ratio: 16 / 9; }
.o-framedimg--portrait  { aspect-ratio: 4 / 5; }

/* Uncropped: the picture is back in the flow at its own proportions, so
   nothing is trimmed and nothing is stretched. */
.o-framedimg--full {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}
/* position:relative, not static — the offset blue squares are positioned, and a
   static image would be painted underneath them. */
.o-framedimg--full img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: fill;
}

/* Which part of the picture survives the trim. */
.o-framedimg--focus-top    img { object-position: 50% 0; }
.o-framedimg--focus-bottom img { object-position: 50% 100%; }
.o-framedimg--focus-left   img { object-position: 0 50%; }
.o-framedimg--focus-right  img { object-position: 100% 50%; }

/* --------------------------------------------------------------------------
   Lead paragraph rhythm (the Solutions page introduction).

   As blocks, the page title and the lead are two sections, so the copy sat a
   full section's padding below the title it introduces while the rule beneath
   it — which separates the introduction from the logo grids — had almost none.
   The two spaces were the wrong way round.
   -------------------------------------------------------------------------- */
.o-section--tight + .o-leadblock,
.o-section + .o-leadblock { padding-top: 0; }

/* .o-head is spaced for a heading that introduces a whole section further down
   the page. Here the copy is the heading's own sentence, so it belongs close
   underneath — one gap, set here, rather than the section gap plus a gap of
   its own. */
.o-leadblock .o-head { margin-bottom: var(--space-md); }
.o-leadblock > .o-container > .o-container--text { margin-top: 0; }

/* Air between the introduction and whatever the rule divides it from. */
.o-leadblock .o-divider { margin-top: calc(var(--space-xl) * 1.25); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact page: the showroom line under the office panel.
   -------------------------------------------------------------------------- */
.o-officecard__note {
  max-width: 62ch;
  margin: var(--space-md) 0 0;
}

/* --------------------------------------------------------------------------
   Team member with no photograph yet.

   Drawn rather than uploaded, so the box is the SVG itself and object-fit does
   not apply — the intrinsic ratio has to match what .o-member__photo asks for.
   -------------------------------------------------------------------------- */
.o-member__photo--placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.4;
}

/* --------------------------------------------------------------------------
   Contact form.

   .o-form, .o-field and .o-btn--primary are all in the design system already —
   the form renders the same markup the reference build did, so it inherits
   those. Only the parts the reference build had no need for live here: the
   honeypot, the validation messages and the sent/failed notice.
   -------------------------------------------------------------------------- */

/* Hidden from people, not from bots. display:none would be skipped by some
   form-fillers, which is the opposite of what a honeypot wants. */
.o-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.o-formnotice {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--fs-body);
  border-left: 5px solid var(--orion-blue);
  background: var(--pale-tint, #F5F8FB);
  color: var(--orion-navy);
}
.o-formnotice--bad {
  border-left-color: #B3261E;
  background: #FCF2F1;
  color: #6B1A15;
}

.o-field.is-bad input,
.o-field.is-bad select,
.o-field.is-bad textarea { border-color: #B3261E; }

.o-field__error {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-small);
  color: #B3261E;
}

/* The form and the office panel are usually paired in a Columns block; keep
   the button from being dragged full-width by anything. */
.o-form .o-btn { display: inline-block; }

/* --------------------------------------------------------------------------
   Hero height.

   The standard hero is sized by its content plus a comfortable minimum. These
   are the opt-in alternatives, chosen per block in the sidebar.

   The header is sticky and sits in the flow, so it occupies --nav-h at the top
   of the window; a hero that wants to fill the screen has to leave room for it
   or the page starts life already scrollable. --o-hero-extra is set by
   orion.js when the hero has to share the screen with the block beneath it,
   and is 0 otherwise — including when JavaScript never runs.
   -------------------------------------------------------------------------- */
.o-hero--tall { min-height: clamp(620px, 82vh, 940px); }

.o-hero--screen {
  min-height: calc(100vh - var(--o-header-h, var(--nav-h)) - var(--o-hero-extra, 0px));
  /* svh is the window minus the mobile browser's chrome, so the hero does not
     jump as the address bar hides and shows. */
  min-height: calc(100svh - var(--o-header-h, var(--nav-h)) - var(--o-hero-extra, 0px));
}

/* In the editor there is no site header above the canvas and no window to
   fill, so a full-screen hero would push everything else out of view. Show it
   at a workable size instead; the published page is what the setting is for. */
.editor-styles-wrapper .o-hero--screen,
.editor-styles-wrapper .o-hero--tall { min-height: 520px; }

/* --------------------------------------------------------------------------
   Orion sections inside a Columns or Group block.

   Every Orion block wraps itself in a section with its own vertical padding,
   which is right when the block is a band across the page. Inside a layout
   block it is not: Columns or Group has already placed the pair, so the padding
   only pushes both halves down and away from the heading above them. The
   Contact page is the case that shows it — and it can be built either way,
   which is why both are handled.

   The TOP padding only. Zeroing both took the space out from under the last
   block as well, which left the form sitting on the footer.
   -------------------------------------------------------------------------- */
.wp-block-column > .o-section,
.wp-block-column > .o-block-root > .o-section,
.wp-block-group > .o-section,
.wp-block-group > .o-block-root > .o-section { padding-top: 0; }

/* The inline padding stays. WordPress's Columns block is full-bleed — it has
   no gutter of its own — so the container inside each column is what keeps the
   contents off the edge of the window. Zeroing it puts the form hard against
   the left edge.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Space under a page title.

   The gap was the title's own bottom margin plus the section's bottom padding
   — two spaces doing the same job, which read as a hole between the heading
   and the page. The section keeps a little of its padding so the title still
   has room to breathe; the rest comes off.
   -------------------------------------------------------------------------- */
.o-titleblock { padding-bottom: calc(var(--section-y) * .25); }

/* --------------------------------------------------------------------------
   A page title sitting directly above a Columns block — the Contact page.

   The gap that works under a title on Our Team, where big photographic cards
   follow, reads as too much above a form, where the first thing under it is a
   small uppercase label. Close it up for that pairing only, so Our Team and the
   legal pages keep the spacing already signed off.

   Done from the Columns side rather than with :has() on the title, so it works
   in every browser rather than only recent ones.
   -------------------------------------------------------------------------- */
/* Columns and Group both get this: WordPress offers two ways to put blocks
   side by side and which one somebody used is not something the spacing should
   depend on. */
.o-titleblock + .wp-block-columns,
.o-titleblock + .wp-block-group,
.o-titleblock + .wp-block-cover,
.o-titleblock + .wp-block-media-text { margin-top: -2.25rem; }

@media (max-width: 700px) {
  /* Stacked, there is less padding to give back. */
  .o-titleblock + .wp-block-columns,
  .o-titleblock + .wp-block-group,
  .o-titleblock + .wp-block-cover,
  .o-titleblock + .wp-block-media-text { margin-top: -1.25rem; }
}

/* --------------------------------------------------------------------------
   A side-by-side Group on a phone.

   WordPress's Group block offers a "nowrap" flex row, which is right on a
   desktop and impossible on a 390px screen: the form and the panel stay in one
   row and the page scrolls sideways. Let a row holding Orion sections wrap
   once there is no room for it.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .wp-block-group.is-layout-flex.is-nowrap { flex-wrap: wrap; }
  .wp-block-group.is-layout-flex > .o-section { flex: 1 1 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Footer bar: copyright left, legal links right.

   orion.css makes .o-footer__bar a space-between flex row, which is right in
   the reference build where the two items are its direct children. The theme
   puts them inside an .o-container so they line up with the rest of the page,
   and that container was then the row's only child — so the two items simply
   stacked. The row belongs on the container.
   -------------------------------------------------------------------------- */
.o-footer__bar > .o-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.75rem;
}
.o-footer__bar .o-footer__copyright { margin: 0; }

/* A real menu assigned under Appearance → Menus arrives as a list; the
   automatic fallback arrives as bare links. Make the two identical. */
.o-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 980px) {
  .o-footer__bar > .o-container { justify-content: center; text-align: center; }
}

/* ==========================================================================
   LOGO MARQUEES
   --------------------------------------------------------------------------
   Two variants of the scrolling banner: logos alone, and logos with the
   company name underneath. Both ride on the text marquee's machinery in
   orion.css and orion.js, so the seamless loop, the pause-on-hover, the
   keyboard pause button and the reduce-motion behaviour are all inherited.
   ========================================================================== */

/* --- Light: no background, blue rules -------------------------------------
   The inverse of the blue text banner. Worth knowing why it is the default
   for logos: five of the eighteen supplied logo files are JPEGs with a solid
   white background baked in, so on a coloured band they read as white
   rectangles. On no background at all, every logo sits on white exactly as
   its designer intended.
   ------------------------------------------------------------------------- */
.o-marquee--light {
  background: transparent;
  color: var(--orion-navy);
  border-block-color: var(--orion-blue);
}
.o-marquee--light .o-marquee__group > * {
  color: var(--orion-navy);
  border-right-color: var(--orion-blue);
}
.o-marquee--light .o-marquee__group > a:hover {
  background: rgba(32, 99, 165, .07);
  color: var(--orion-navy);
}
.o-marquee--light .o-marquee__toggle {
  border-color: var(--orion-blue);
  background: rgba(255, 255, 255, .9);
  color: var(--orion-navy);
}

/* --- the logo itself ----------------------------------------------------- */
.o-marquee--logos .o-marquee__group > *,
.o-marquee--named .o-marquee__group > * {
  padding-block: clamp(.85rem, 1.7vw, 1.35rem);
}
.o-marquee--logos img,
.o-marquee--named img {
  display: block;
  height: var(--o-marquee-logo-h, 46px);
  width: auto;
  /* A wordmark eleven times wider than it is tall would otherwise run for half
     the banner, so the width is capped and the height gives way. */
  max-width: 190px;
  object-fit: contain;
  padding-block: 0;
}

/* On a blue band the white-background JPEGs need a deliberate white chip,
   otherwise they look like a mistake rather than a choice. */
.o-marquee--logos:not(.o-marquee--light) img,
.o-marquee--named:not(.o-marquee--light) img {
  background: var(--white);
  padding: .4rem .55rem;
  border-radius: 2px;
}

/* --- logo with the name underneath --------------------------------------- */
.o-marquee--named .o-marquee__group > * {
  flex-direction: column;
  gap: .6rem;
}
.o-marquee__label {
  font-size: clamp(.68rem, .6rem + .22vw, .82rem);
  letter-spacing: .16em;
  line-height: 1;
}

/* An entry with no logo still needs the same height as its neighbours, or the
   band's own height jumps as it scrolls past. */
.o-marquee--named .o-marquee__group > a:not(:has(img)) {
  min-height: calc(var(--o-marquee-logo-h, 42px) + 1.6rem);
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   A manufacturer in the logo grid with no logo uploaded yet.

   Its name stands in, set to look deliberate rather than broken — but plainly
   not a logo, so it reads as artwork still to come.
   -------------------------------------------------------------------------- */
.o-logogrid__name {
  display: block;
  padding: .5rem 1rem;
  font-family: var(--font-display);
  font-size: clamp(.9rem, .8rem + .4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--orion-navy);
}