/* Trimmed reset, ported from src/styles/reset.css */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Matches src/styles/reset.css: the native `hidden` attribute must win over
   an element's own `display` declaration regardless of specificity. */
[hidden] {
  display: none !important;
}

/* Matches src/styles/reset.css: neutralizes all CSS transitions/animations
   (including AOS's own opacity/transform transition on `[data-aos]`
   elements) under reduced motion, so scroll animations still trigger their
   state change but render instantly with no visible motion. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration-skip-ink: none;
  color: currentColor;
  text-decoration: none;
  word-break: break-all;
}

/* Fonts + base typography, ported from src/styles/base.css */

@font-face {
  font-family: 'PPObjectSans-Regular';
  src: url('../fonts/PPObjectSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PPObjectSans-Medium';
  src: url('../fonts/PPObjectSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PPObjectSans-Bold';
  src: url('../fonts/PPObjectSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-regular: 'PPObjectSans-Regular', sans-serif;
  --font-semi-bold: 'PPObjectSans-Bold', sans-serif;
  --font-bold: 'PPObjectSans-Bold', sans-serif;

  font-family: var(--font-regular);
  color: var(--text-primary);
  font-size: var(--text-copy-lg);
  line-height: var(--linehight-copy-lg);
}

/* Ported from src/styles/base.css:36 — promotes every scroll-reveal element
   to its own compositor layer up front, so AOS's opacity/transform
   transition doesn't pay for layer creation on its first frame (and
   `backface-visibility` keeps transformed text from shimmering). The
   `translateZ(0)` here is deliberately the same no-op the reference
   declares: aos.css is enqueued after this file (see functions.php), so
   its equally-specific `[data-aos="fade-up"] { transform: translate3d(0,
   100px, 0) }` still wins and supplies the actual pre-reveal offset —
   the ordering matters, don't move the aos.css enqueue ahead of base.css. */
[data-aos] {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: auto !important;
}

/* main flex/gap/padding, ported from src/layouts/RootLayout.astro global styles
   (background-color/display/flex-direction/scrollbar props from src/styles/base.css) */
main {
  background-color: var(--background-default);
  display: flex;
  gap: 48px;
  flex-direction: column;
  padding-bottom: 48px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
}

/* The Coverage page (templates/page-coverage.html) is one full-bleed
   section between the header and the footer, edge to edge, as in Figma
   7976:51516. WP core's root block gap (`:where(.wp-site-blocks) > *`,
   24px) put a grey strip above `main` and another above the footer, under
   the map's gradient (tz 2026-11-02). Only this template drops it. */
.wp-site-blocks > main.coverage-main,
.wp-site-blocks > main.coverage-main + footer.wp-block-template-part {
  margin-block-start: 0;
}

/* WP core's own constrained-layout CSS (global-styles-inline-css) sets
   `margin-left/right: auto !important` on every non-aligned direct child of
   `.is-layout-constrained` (the `main` element on every page/post template).
   Auto margins on a flex item's cross axis win over `align-items: stretch`,
   so without an explicit width `.wp-block-post-content` shrinks to its
   content's intrinsic (max-content) width and gets centered instead of
   stretching to fill `main` -- the same trap already patched for
   `.wp-block-post-title` in legal.css. Filling the cross axis here removes
   the spare space those auto margins would otherwise center into. Global
   because the bug is a property of any page using `wp:post-content` inside a
   constrained-layout `main`, not just the one page (devices) where a
   downstream block currently happens to make it visible. Safe/inert: this
   element already renders `display: flow-root` (wp-includes core style) and
   has no sibling to share space with inside `main`. */
.wp-block-post-content {
  width: 100%;
}

/* The front page (templates/front-page.html) takes its landing blocks from
   the home page's content, one page per language, instead of listing them
   in the template. `display: contents` drops the post-content wrapper from
   the box tree, so the blocks are flex items of `main` exactly as before:
   the same responsive gap above, the same `position: fixed` QR card beside
   them. Their widths come from the wrapper's own constrained layout
   (content size for every block, none for the alignfull hero), the rules
   `main`'s layout gave them before; its blockGap 0 matches `main`'s too.
   The width fix above is moot here: the wrapper has no box to size. */
.wp-block-post-content.landing-content {
  display: contents;
}

/* The company pages (templates/company-page.html: About us, Principles,
   Careers, Contact) are built the same way: their section blocks are flex
   items of `main`, so `main`'s 48/80/120 gap separates them and its
   padding closes the page, as in Dustin's frames (120 between sections and
   under the last one on desktop, 48 on phones). */
.wp-block-post-content.page-sections {
  display: contents;
}

img {
  object-fit: cover;
}

h2 {
  font-family: var(--font-bold);
  font-size: var(--text-headline-xl);
  line-height: var(--linehight-headline-xl);
  margin: -11px 0 -15px 0;
}

.headline-display {
  font-family: var(--font-bold);
  font-size: var(--text-headline-lg);
  line-height: var(--linehight-headline-lg);
  margin: -8px 0 -10px 0;
}

h3 {
  font-family: var(--font-bold);
  font-size: var(--text-headline-lg);
  line-height: var(--linehight-headline-lg);
  margin: -8px 0 -10px 0;
}

h4 {
  font-family: var(--font-bold);
  font-size: var(--text-headline-md);
  line-height: var(--linehight-headline-md);
  margin: -7px 0 -8px 0;
}

h5 {
  font-family: var(--font-bold);
  font-size: var(--text-headline-sm);
  line-height: var(--linehight-headline-sm);
  margin: -4px 0 -6px 0;
  white-space: pre-line;
}

p,
.text-copy-lg {
  margin: -7px 0 -8px 0;
  white-space: pre-line;
}

.bold {
  font-family: var(--font-bold);
}

.text-copy-md {
  font-size: var(--text-copy-md);
  line-height: var(--linehight-copy-md);
  margin: -4px 0 -5px 0;
}

.text-copy-sm {
  font-size: var(--text-copy-sm);
  line-height: var(--linehight-copy-sm);
  margin: -5px 0 -7px 0;
}

@media (min-width: 600px) {
  main {
    gap: 80px;
    padding-bottom: 120px;
  }
}

@media (min-width: 1024px) {
  main {
    gap: 120px;
    padding-bottom: 120px;
  }

  .text-copy-md {
    margin: -7px 0 -5px 0;
  }

  h2 {
    margin: -17px 0 -21px 0;
  }

  .headline-display {
    font-size: var(--text-headline-xl);
    line-height: var(--linehight-headline-xl);
    margin: -17px 0 -21px 0;
  }
}