/*!
 * PrintLocker — base (load on every page, before header.css / footer.css / page styles)
 * Colour + spacing tokens and the small layout helpers every part of the site uses.
 */

/* Tokens — change a value once here and the header, footer and every page follow */
:root {
  --secY: 80px; --secX: 50px; --wrap: 1280px;
  --blue: #1e90ff; --blue-deep: #0b62c4; --blue-tint: #eaf4ff;
  --pink: #e70a89; --pink-tint: #fdeaf5;
  --ink: #000; --yellow: #f6ea1e;
  --paper: #fff; --soft: #f5f8fc; --line: #e2e8f0; --muted: #5a6473;
  --font: Poppins, system-ui, sans-serif;
  /* Type scale — section titles (h2), intros under them, body text. Used through .pl-h2 / .pl-intro / .pl-text */
  --h2: 38px; --h2-lh: 1.1;
  --intro: 16px; --text: 15px; --text-lh: 1.6;
}
@media (max-width: 1024px) {
  :root { --secY: 60px; --secX: 40px; --h2: 28px; }
  [data-desktop-only] { display: none !important; }
  [data-mobile-only] { display: inline-flex !important; }
}
@media (max-width: 640px) { :root { --secY: 40px; --secX: 30px; --h2: 22px; --intro: 14px; --text: 14px; } }

/* Same box model as GeneratePress (padding and borders count inside an element's width),
   so our sections lay out the same as the theme */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

.is-hidden { display: none !important; }

/* Layout helpers — change the width or spacing once in :root and every section follows.
   pl-container = content width · px = side padding · py = top/bottom section padding */
.pl-container {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

/* With side padding the box grows by it, so the content itself is always exactly --wrap wide */
.pl-container.px {
  max-width: calc(var(--wrap) + var(--secX) * 2);
}

.px {
  padding-left: var(--secX);
  padding-right: var(--secX);
}

.py {
  padding-top: var(--secY);
  padding-bottom: var(--secY);
}

.pl-relative {
  position: relative;
}

/* Photo that fills its frame (hero, why, get in touch, mega menu). The frame sets the size. */
.pl-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}