/* ============================================================================
   ACUMATICA — TYPOGRAPHY STYLES FOR WORDPRESS
   ----------------------------------------------------------------------------
   Brand type system extracted from the Acumatica homepage Figma source.
   Fonts:  Inter Tight (display/headings) · Inter (body) · IBM Plex Serif (quotes)
   Units:  rem (1rem = 16px). Change the base in :root / html if you must.
   Works in:  classic themes (style.css / Additional CSS), block themes,
              and page builders. No build step, no !important.

   HOW TO USE
   1. Load the fonts — pick ONE method (see "FONT LOADING" below).
   2. Drop this file into your theme (or paste into Appearance → Customize →
      Additional CSS). Native tags (h1–h6, p, blockquote…) are styled
      automatically; utility classes (.acu-h1, .acu-body…) are there when you
      need to style without the matching tag.
   3. Native tag styles skip any element inside a <header> or <footer> tag,
      at any depth (e.g. a site nav, a widget footer, or a per-article
      <header class="entry-header">). Utility classes are NOT scoped this
      way — they still apply everywhere, since they're opt-in by class.
   4. To keep these styles OFF the WP admin bar / plugin widgets, wrap your
      content in <div class="acu-type"> … </div> and find-replace per the
      "OPTIONAL SCOPING" note at the bottom.
   ============================================================================ */


/* ============================================================================
   FONT LOADING — choose ONE of the two methods
   ============================================================================ */

/* ---- METHOD A · Google Fonts (easiest) -----------------------------------
   Add this <link> to your theme <head> (or via wp_enqueue_style), OR keep the
   @import below. <link> is faster than @import — prefer it if you can edit the
   header. IBM Plex Serif is only needed if you use pull-quotes.

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=IBM+Plex+Serif:wght@400&display=swap" rel="stylesheet">
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400&display=swap');

/* ---- METHOD B · Self-hosted (brand TTFs in this folder's /fonts) ----------
   If you self-host, DELETE the @import above and UNCOMMENT this block.
   Upload the /fonts folder alongside this CSS (or point url() at your media
   library / theme path). Inter & Inter Tight are variable fonts (one file
   covers every weight).

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("./fonts/InterTight-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("./fonts/IBMPlexSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
*/


/* ============================================================================
   TOKENS
   All values are prefixed --acu- so they never collide with theme/plugin vars.
   Sizes are rem; mobile overrides live in the media query near the bottom.
   ============================================================================ */
:root {
  /* -- Font families ------------------------------------------------------ */
  --acu-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --acu-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --acu-font-serif:   "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* -- Type scale · DESKTOP (rem @ 16px base) ----------------------------- */
  --acu-fs-display: 4rem;       /* 64px — hero / page title           */
  --acu-fs-h1:      3.375rem;   /* 54px                               */
  --acu-fs-h2:      2.5rem;     /* 40px                               */
  --acu-fs-h3:      1.5rem;     /* 24px                               */
  --acu-fs-h4:      1.3125rem;  /* 21px                               */
  --acu-fs-h5:      1.125rem;   /* 18px                               */
  --acu-fs-h6:      0.9375rem;  /* 15px                               */

  --acu-fs-lead:    1.125rem;   /* 18px — intro / lead paragraph      */
  --acu-fs-body:    1rem;       /* 16px — default body                */
  --acu-fs-small:   0.875rem;   /* 14px                               */
  --acu-fs-caption: 0.8125rem;  /* 13px — captions, meta              */
  --acu-fs-eyebrow: 0.8125rem;  /* 13px — uppercase kicker            */
  --acu-fs-quote:   2rem;       /* 32px — IBM Plex Serif pull-quote   */

  /* -- Weights ------------------------------------------------------------ */
  --acu-fw-regular: 400;
  --acu-fw-medium:  500;
  --acu-fw-semibold:600;
  --acu-fw-bold:    700;

  /* -- Line heights ------------------------------------------------------- */
  --acu-lh-tight:   1.15;
  --acu-lh-snug:    1.30;
  --acu-lh-normal:  1.40;
  --acu-lh-relaxed: 1.50;
  --acu-lh-loose:   1.60;

  /* -- Letter spacing ----------------------------------------------------- */
  --acu-tracking-tight:  -0.01em;
  --acu-tracking-normal:  0;
  --acu-tracking-wide:    0.03em;
  --acu-tracking-eyebrow: 0.08em;

  /* -- Type colors (brand) ------------------------------------------------ */
  --acu-color-heading:   #000000;  /* black                */
  --acu-color-body:      #000000;  /* black                */
  --acu-color-secondary: #5c6878;  /* slate gray subtext   */
  --acu-color-link:      #0575ad;  /* accessible link blue */
  --acu-color-link-hover:#0092cc;  /* deep cyan            */
  --acu-color-accent:    #0cbdf2;  /* Mayan cyan           */
}


/* ============================================================================
   BASE — native HTML elements
   Single-class / single-element selectors keep specificity low so theme
   overrides remain easy. No !important anywhere.
   ============================================================================ */

/* Page defaults. Setting font-size here makes every rem above resolve to 16px.
   Remove the html rule if your theme already sets a base size you want to keep. */
/* html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
 */
body {
  font-family: var(--acu-font-body) !important;
  font-size: var(--acu-fs-body);
  font-weight: var(--acu-fw-regular);
  line-height: var(--acu-lh-relaxed);
  color: var(--acu-color-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

header,
footer {
  font-family: revert;
  font-size: revert;
  font-weight: revert;
  line-height: revert;
  color: revert;
  -webkit-font-smoothing: revert;
  -moz-osx-font-smoothing: revert;
  text-rendering: revert;
}

/* Headings ---------------------------------------------------------------- */
h1:not(header *, footer *),
h2:not(header *, footer *),
h3:not(header *, footer *),
h4:not(header *, footer *),
h5:not(header *, footer *),
h6:not(header *, footer *) {
  font-family: var(--acu-font-display) !important;
  color: var(--acu-color-heading);
  margin: 0 0 0.5em;
  text-wrap: balance;          /* tidy multi-line headlines */
}

h1:not(header *, footer *) {
  font-size: var(--acu-fs-h1);
  font-weight: var(--acu-fw-semibold);
  line-height: var(--acu-lh-tight);
  letter-spacing: var(--acu-tracking-tight);
}
h2:not(header *, footer *) {
  font-size: var(--acu-fs-h2);
  font-weight: var(--acu-fw-semibold);
  line-height: var(--acu-lh-snug);
  letter-spacing: var(--acu-tracking-tight);
}
h3:not(header *, footer *) {
  font-size: var(--acu-fs-h3);
  font-weight: var(--acu-fw-semibold);
  line-height: var(--acu-lh-snug);
}
h4:not(header *, footer *) {
  font-size: var(--acu-fs-h4);
  font-weight: var(--acu-fw-semibold);
  line-height: var(--acu-lh-snug);
}
h5:not(header *, footer *) {
  font-size: var(--acu-fs-h5);
  font-weight: var(--acu-fw-semibold);
  line-height: var(--acu-lh-normal);
}
h6:not(header *, footer *) {
  font-size: var(--acu-fs-h6);
  font-weight: var(--acu-fw-bold);
  line-height: var(--acu-lh-normal);
}

/* Body copy --------------------------------------------------------------- */
p:not(header *, footer *) {
  margin: 0 0 1rem;
  font-size: var(--acu-fs-body);
  line-height: var(--acu-lh-relaxed);
  text-wrap: pretty;
  font-family: var(--acu-font-body) !important;
}

/* Lead/intro paragraph — add class="lead" or .acu-lead */
p.lead:not(header *, footer *) {
  font-size: var(--acu-fs-lead);
  line-height: var(--acu-lh-relaxed);
  color: var(--acu-color-secondary);
}

small:not(header *, footer *) { font-size: var(--acu-fs-small); }

strong:not(header *, footer *), b:not(header *, footer *) { font-weight: var(--acu-fw-bold); }
em:not(header *, footer *), i:not(header *, footer *)     { font-style: italic; }

/* Links ------------------------------------------------------------------- */
a:not(header *, footer *) {
  color: var(--acu-color-link);
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.2, 0, 0, 1);
}
a:not(header *, footer *):hover,
a:not(header *, footer *):focus-visible {
  color: var(--acu-color-link-hover);
  text-decoration: underline;
}

/* Lists ------------------------------------------------------------------- */
ul:not(header *, footer *), ol:not(header *, footer *) {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
  line-height: var(--acu-lh-relaxed);
}
li:not(header *, footer *) { margin-bottom: 0.375rem; }
li:not(header *, footer *) > ul, li:not(header *, footer *) > ol { margin: 0.375rem 0 0; }

/* Blockquote → brand pull-quote (IBM Plex Serif) -------------------------- */
blockquote:not(header *, footer *) {
  font-family: var(--acu-font-serif);
  font-weight: var(--acu-fw-regular);
  font-size: var(--acu-fs-quote);
  line-height: var(--acu-lh-snug);
  color: var(--acu-color-heading);
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--acu-color-accent);
}
blockquote p:not(header *, footer *) { font-size: inherit; line-height: inherit; }
blockquote cite:not(header *, footer *) {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--acu-font-body);
  font-style: normal;
  font-size: var(--acu-fs-small);
  font-weight: var(--acu-fw-semibold);
  letter-spacing: var(--acu-tracking-wide);
  color: var(--acu-color-secondary);
}

/* Inline code / pre (kept neutral; brand uses no mono in marketing) ------- */
code:not(header *, footer *), kbd:not(header *, footer *), samp:not(header *, footer *), pre:not(header *, footer *) {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

hr:not(header *, footer *) {
  border: 0;
  border-top: 1px solid #dde2ea;
  margin: 2rem 0;
}


/* ============================================================================
   UTILITY CLASSES
   Use when the visual style and the semantic tag don't match — e.g. a <div>
   that should LOOK like an H2, or body text that needs the lead treatment.
   ============================================================================ */
.acu-display {
  font-family: var(--acu-font-display);
  font-size: var(--acu-fs-display);
  font-weight: var(--acu-fw-semibold);
  line-height: var(--acu-lh-tight);
  letter-spacing: var(--acu-tracking-tight);
  color: var(--acu-color-heading);
}
.acu-h1 { font-family: var(--acu-font-display); font-size: var(--acu-fs-h1); font-weight: var(--acu-fw-semibold); line-height: var(--acu-lh-tight); letter-spacing: var(--acu-tracking-tight); color: var(--acu-color-heading); }
.acu-h2 { font-family: var(--acu-font-display); font-size: var(--acu-fs-h2); font-weight: var(--acu-fw-semibold); line-height: var(--acu-lh-snug);  letter-spacing: var(--acu-tracking-tight); color: var(--acu-color-heading); }
.acu-h3 { font-family: var(--acu-font-display); font-size: var(--acu-fs-h3); font-weight: var(--acu-fw-semibold); line-height: var(--acu-lh-snug);  color: var(--acu-color-heading); }
.acu-h4 { font-family: var(--acu-font-display); font-size: var(--acu-fs-h4); font-weight: var(--acu-fw-semibold); line-height: var(--acu-lh-snug);  color: var(--acu-color-heading); }
.acu-h5 { font-family: var(--acu-font-display); font-size: var(--acu-fs-h5); font-weight: var(--acu-fw-semibold); line-height: var(--acu-lh-normal); color: var(--acu-color-heading); }
.acu-h6 { font-family: var(--acu-font-display); font-size: var(--acu-fs-h6); font-weight: var(--acu-fw-bold);     line-height: var(--acu-lh-normal); color: var(--acu-color-heading); }

.acu-lead {
  font-family: var(--acu-font-body);
  font-size: var(--acu-fs-lead);
  font-weight: var(--acu-fw-regular);
  line-height: var(--acu-lh-relaxed);
  color: var(--acu-color-secondary);
}
.acu-body {
  font-family: var(--acu-font-body);
  font-size: var(--acu-fs-body);
  font-weight: var(--acu-fw-regular);
  line-height: var(--acu-lh-relaxed);
  color: var(--acu-color-body);
}
.acu-small {
  font-family: var(--acu-font-body);
  font-size: var(--acu-fs-small);
  line-height: var(--acu-lh-loose);
  color: var(--acu-color-secondary);
}
.acu-caption {
  font-family: var(--acu-font-body);
  font-size: var(--acu-fs-caption);
  font-weight: var(--acu-fw-medium);
  letter-spacing: var(--acu-tracking-wide);
  color: var(--acu-color-secondary);
}
.acu-eyebrow {
  font-family: var(--acu-font-display);
  font-size: var(--acu-fs-eyebrow);
  font-weight: var(--acu-fw-bold);
  letter-spacing: var(--acu-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--acu-color-link);
}
.acu-quote {
  font-family: var(--acu-font-serif);
  font-size: var(--acu-fs-quote);
  font-weight: var(--acu-fw-regular);
  line-height: var(--acu-lh-snug);
  color: var(--acu-color-heading);
}
.acu-link {
  font-family: var(--acu-font-body);
  font-weight: var(--acu-fw-medium);
  color: var(--acu-color-link);
}
.acu-link:hover { color: var(--acu-color-link-hover); }

/* Helpers ----------------------------------------------------------------- */
.acu-weight-regular  { font-weight: var(--acu-fw-regular); }
.acu-weight-medium   { font-weight: var(--acu-fw-medium); }
.acu-weight-semibold { font-weight: var(--acu-fw-semibold); }
.acu-weight-bold     { font-weight: var(--acu-fw-bold); }
.acu-color-secondary { color: var(--acu-color-secondary); }
.acu-color-accent    { color: var(--acu-color-accent); }
.acu-on-dark, .acu-on-dark * { color: #ffffff; }   /* heading/body on dark panels */


/* ============================================================================
   RESPONSIVE — TABLET (≤ 1024px)
   Pull the two largest display sizes in slightly before phones.
   ============================================================================ */
@media (max-width: 1024px) {
  :root {
    --acu-fs-display: 3.25rem;  /* 52px */
    --acu-fs-h1:      2.75rem;  /* 44px */
    --acu-fs-h2:      2.125rem; /* 34px */
  }
}

/* ============================================================================
   RESPONSIVE — MOBILE (≤ 768px)
   Override the scale tokens; every rem-based rule above reflows automatically.
   ============================================================================ */
@media (max-width: 768px) {
  :root {
    --acu-fs-display: 2.5rem;    /* 40px */
    --acu-fs-h1:      2.125rem;  /* 34px */
    --acu-fs-h2:      1.75rem;   /* 28px */
    --acu-fs-h3:      1.375rem;  /* 22px */
    --acu-fs-h4:      1.1875rem; /* 19px */
    --acu-fs-h5:      1.0625rem; /* 17px */
    --acu-fs-lead:    1.0625rem; /* 17px */
    --acu-fs-quote:   1.5rem;    /* 24px */
  }
  body { line-height: var(--acu-lh-relaxed); }
  /* Headings can wrap tighter on small screens */
  h1:not(header *, footer *), h2:not(header *, footer *), h3:not(header *, footer *) { text-wrap: pretty; }
}

/* ============================================================================
   RESPONSIVE — SMALL PHONES (≤ 480px)
   ============================================================================ */
@media (max-width: 480px) {
  :root {
    --acu-fs-display: 2.125rem;  /* 34px */
    --acu-fs-h1:      1.875rem;  /* 30px */
    --acu-fs-h2:      1.5rem;    /* 24px */
  }
}


/* ============================================================================
   OPTIONAL SCOPING
   ----------------------------------------------------------------------------
   These styles apply globally. To confine them to your own content (and avoid
   touching the WP admin bar, plugins, or other themes' widgets), wrap content
   in <div class="acu-type"> … </div> and prefix the BASE selectors, e.g.:

       .acu-type h1 { … }
       .acu-type p  { … }

   Leave the TOKENS (:root) and utility classes (.acu-*) global so they're
   available everywhere. Only the bare element selectors (body, h1–h6, p, a,
   ul, ol, blockquote, hr…) need the .acu-type prefix.

   ACCESSIBILITY: every rem size keys off the root font-size, so the browser's
   text-zoom and the WP reader settings scale this type system as expected.
   ============================================================================ */