/* ---------------------------------------------------------------------------
   WordPress-only additions.

   app.css is the production stylesheet from the Next.js build, byte for byte
   (c348fa68ca4ba59f.css, font paths rewritten). Do not edit it — rebuild it
   from the Next.js source instead, so the two sites cannot drift.

   This file holds only what WordPress needs that the Next.js site never did.
   --------------------------------------------------------------------------- */

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
  width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--surface); clip: auto; clip-path: none; color: var(--ink);
  display: block; font-size: 14px; height: auto; left: 8px; line-height: normal;
  padding: 12px 18px; text-decoration: none; top: 8px; width: auto; z-index: 100000;
}

/* The admin bar pushes the page down; keep the sticky nav below it. */
.admin-bar .navwrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .navwrap { top: 46px; } }

/* Anything toggled with [hidden] (menus, form steps, optional fields) must stay
   hidden even where a design class sets display — .form-step is display:flex. */
[hidden] { display: none !important; }

/* Block editor output inside the article body. */
.alignwide { max-width: var(--content); margin-inline: auto; }
.alignfull { width: 100%; }
img.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ---------------------------------------------------------------------------
   Design & UX audit, October 2026 (DESIGN/Oria_Digital_Design_UX_Audit.md).
   Changes layered over the production stylesheet rather than edited into it.
   --------------------------------------------------------------------------- */

/* Shorter hero: smaller headline and less vertical space, so proof sits higher. */
.hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(36px, 4vw, 56px); }
.hero-inner { gap: 20px; }
.hero h1 { font-size: clamp(36px, 5.2vw, 70px); max-width: 20ch; }
.hero h1 .ser, main h1 > .ser { white-space: nowrap; }
@media (max-width: 480px) {
  .hero-kicker { letter-spacing: .16em; font-size: 12px; gap: 10px; }
}
.hero-link { margin: -4px 0 0; font-size: 15px; color: var(--muted); }
.hero-reassure {
  list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px 22px; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.hero-reassure li { display: inline-flex; align-items: center; gap: 8px; }
.hero-reassure li::before {
  content: ""; width: 6px; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end, var(--accent-start)));
}

/* Case-study and project images stay inside their own box. In some browsers a
   100%-height image in an aspect-ratio grid cell spilled behind the text. */
.case-media { position: relative; overflow: hidden; min-height: 0; }
.case-media > img { position: absolute; inset: 0; display: block; }
.case-card > div:last-child { position: relative; background: inherit; }
.project-card { padding: 0; overflow: hidden; }
.project-body { padding: clamp(22px, 2.5vw, 30px); flex: 1; }

/* AI demo: note and contextual action under the panel. */
.demo-foot {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--dark-hair);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.demo-foot p { margin: 0; max-width: 62ch; font-size: 14.5px; line-height: 1.65; color: var(--dark-fg-mid); }

/* Pricing jump links. */
.jump-links { margin-top: 28px; }
.jump-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.jump-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); font-size: 14.5px; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.jump-links a:hover, .jump-links a:focus-visible { border-color: var(--accent-start); color: var(--accent-start); }
[id] { scroll-margin-top: 110px; }

/* Audit form promise, next to the fields. */
.form-promise { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }

/* Opaque Services dropdown: hero text must not show through the options. */
.navdrop-menu { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The sticky mobile CTA is redundant on a page that is already a form, and
   would cover fields while the keyboard is open. */
body:has(#enquiry) .mobile-cta { display: none; }

/* Essential content never waits on animation when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Footer runs edge to edge; its content stays on the page's content width. */
.foot { margin-left: 0; margin-right: 0; }