/* primecode base — shell + the components that appear on every route.
   Tokens live in theme.json (the kernel's single token source). The block
   below aliases WordPress' generated properties onto the --pc-* names the
   plan and the design rules use. It repeats NAMES, never values. */
:root {
  /* colour */
  --pc-primary:      var(--wp--preset--color--primary);
  --pc-secondary:    var(--wp--preset--color--secondary);
  --pc-band:         var(--wp--preset--color--band);
  --pc-hero-wash:    var(--wp--preset--color--hero-wash);
  --pc-ink:          var(--wp--preset--color--ink);
  --pc-paper:        var(--wp--preset--color--paper);
  --pc-black:        var(--wp--preset--color--black);
  --pc-muted:        var(--wp--preset--color--muted);
  --pc-rule:         var(--wp--preset--color--rule);
  --pc-divider:      var(--wp--preset--color--divider);
  --pc-surface-odd:  var(--wp--preset--color--surface-odd);
  --pc-surface-even: var(--wp--preset--color--surface-even);
  /* PLAN.md compatibility names */
  --pc-base:         var(--wp--preset--color--ink);
  --pc-base-bg:      var(--wp--preset--color--paper);
  /* type */
  --pc-font:         var(--wp--preset--font-family--body);
  --pc-fs-hero:      var(--wp--preset--font-size--hero);
  /* WordPress kebab-cases preset slugs: theme.json `h2` is emitted as `--h-2`. */
  --pc-fs-h2:        var(--wp--preset--font-size--h-2);
  --pc-fs-h3:        var(--wp--preset--font-size--h-3);
  --pc-fs-h4:        var(--wp--preset--font-size--h-4);
  --pc-fs-body:      var(--wp--preset--font-size--body);
  --pc-fs-field:     var(--wp--preset--font-size--field);
  --pc-lh-tight:     var(--wp--custom--line-height--tight);
  --pc-lh-nav:       var(--wp--custom--line-height--nav);
  --pc-lh-body:      var(--wp--custom--line-height--body);
  --pc-fw-body:      var(--wp--custom--weight--body);
  --pc-fw-heading:   var(--wp--custom--weight--heading);
  --pc-fw-nav:       var(--wp--custom--weight--nav);
  --pc-fw-hero:      var(--wp--custom--weight--hero);
  /* space + shape */
  --pc-gutter:       var(--wp--custom--layout--gutter);
  --pc-shell-gutter: var(--wp--custom--layout--shell-gutter);
  --pc-section-y:    var(--wp--custom--section-y);
  --pc-chip-pad:     var(--wp--custom--chip--pad);
  --pc-chip-gap:     var(--wp--custom--chip--gap);
  --pc-measure:      var(--wp--style--global--content-size);
  --pc-wide:         var(--wp--style--global--wide-size);
  --pc-radius:       var(--wp--custom--radius);
  --pc-motion:       var(--wp--custom--motion);
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--pc-ink); background: var(--pc-paper); font-family: var(--pc-font); font-size: var(--pc-fs-body); font-weight: var(--pc-fw-body); line-height: var(--pc-lh-body); }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
a { color: var(--pc-primary); text-underline-offset: .18em; }

/* shell — the source's boxed container is 1140px; content sits inside a
   10px column inset, the header/footer columns inside 20px. */
/* Landmarks are full-bleed so their backgrounds span the viewport (the source footer,
   credit bar and title band all reach the edges); .pc-shell inside them owns the cap. */
.site-header, .site-footer, .site-main { width: 100%; }
.site-main { min-height: 55vh; }
.pc-shell { width: min(100%, var(--pc-wide)); margin-inline: auto; padding-inline: var(--pc-gutter); }
.pc-shell--wide { padding-inline: var(--pc-shell-gutter); }

/* header — white, logo left, nav right. 86px tall at every desktop width. */
.pc-header { background: var(--pc-paper); }
.pc-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--md); padding-block: var(--wp--preset--spacing--sm); }
.pc-header__brand { display: block; line-height: 0; }
.pc-header__logo { width: 250px; height: auto; }

/* nav — the kernel navigation component, dressed to match the source */
.primary-navigation__menu { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.primary-navigation__menu a { display: block; padding: 13px 10px; color: var(--pc-black); font-size: var(--pc-fs-body); font-weight: var(--pc-fw-nav); line-height: var(--pc-lh-nav); text-decoration: none; }
.primary-navigation__menu a:hover { text-decoration: underline; }
.primary-navigation__menu .current-menu-item > a { text-decoration: underline; }
.primary-navigation__toggle { display: none; align-items: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: var(--pc-radius); background: var(--pc-secondary); color: var(--pc-black); font-size: var(--pc-fs-body); font-weight: var(--pc-fw-nav); line-height: var(--pc-lh-tight); text-transform: uppercase; cursor: pointer; }
.primary-navigation__toggle-icon { width: 16px; height: 16px; fill: currentColor; }
/* dropdowns — Products (4) and Support (2). Closed = display:none, as the
   source's Elementor dropdown: nothing hidden leaks into the visible text. */
.primary-navigation__menu .menu-item-has-children { position: relative; }
.primary-navigation__menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 240px; margin: 0; padding: 8px 0; list-style: none; background: var(--pc-paper); box-shadow: 0 8px 16px rgb(0 0 0 / .12); }
.primary-navigation__menu .menu-item-has-children:hover > .sub-menu,
.primary-navigation__menu .menu-item-has-children:focus-within > .sub-menu { display: block; }
.primary-navigation__menu .sub-menu a { padding: 10px 20px; white-space: nowrap; }

/* chip — a wrapper box around the heading, 10px all round, 20px below */
.pc-chip { display: inline-block; margin: 0 0 var(--pc-chip-gap); padding: var(--pc-chip-pad); font-weight: var(--pc-fw-heading); line-height: var(--pc-lh-tight); }
.pc-chip--yellow { background: var(--pc-secondary); color: var(--pc-ink); }
.pc-chip--black { background: var(--pc-black); color: var(--pc-secondary); text-align: center; }

/* button */
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: var(--pc-radius); background: var(--pc-secondary); color: var(--pc-black); font-size: var(--pc-fs-body); font-weight: var(--pc-fw-nav); line-height: var(--pc-lh-tight); text-decoration: none; cursor: pointer; transition: filter var(--pc-motion) ease; }
.pc-btn:hover { filter: brightness(.94); }

/* footer — yellow two-column block, then the black credit bar */
.pc-footer { background: var(--pc-secondary); color: var(--pc-ink); }
.pc-footer__inner { display: flex; flex-wrap: wrap; padding-block: 25px 16px; }
.pc-footer__col { flex: 1 1 50%; min-width: 260px; text-align: center; padding-inline: var(--pc-gutter); }
.pc-footer__chip { font-size: var(--pc-fs-h2); }
.pc-footer__chip--company { font-size: var(--pc-fs-h3); }
.pc-footer__menu { margin: 0; padding: 0; list-style: none; }
.pc-footer__menu a { display: block; padding-block: 10.5px; color: var(--pc-black); font-size: var(--pc-fs-body); font-weight: var(--pc-fw-nav); line-height: var(--pc-lh-nav); text-decoration: none; }
.pc-footer__menu a:hover { text-decoration: underline; }
.pc-footer__address { font-style: normal; }
.pc-footer__line { margin: 0; font-size: var(--pc-fs-body); line-height: var(--pc-lh-body); }
.pc-footer__contact { margin: 0; font-size: var(--pc-fs-body); line-height: var(--pc-lh-tight); }
.pc-footer__contact--first { margin-block-start: var(--wp--preset--spacing--sm); }
.pc-credit { background: var(--pc-black); color: var(--pc-muted); text-align: center; }
.pc-credit__text { margin: 0; padding-block: 10px; font-size: var(--pc-fs-body); line-height: var(--pc-lh-tight); }
.pc-credit__text a { color: var(--pc-muted); font-weight: var(--pc-fw-nav); }

/* accessibility floor */
.skip-link { position: fixed; inset: var(--wp--preset--spacing--xs) auto auto var(--wp--preset--spacing--xs); z-index: 1000; padding: var(--wp--preset--spacing--sm); color: var(--pc-ink); background: var(--pc-paper); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: var(--wp--custom--focus--width) solid var(--pc-primary); outline-offset: var(--wp--custom--focus--offset); }

@media (max-width: 767px) {
  .pc-header__logo { width: 202px; }
  .pc-footer__col { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pc-btn { transition: none; }
}