/*
 * Fire by Design typography update - 2026-11-03
 * Integration draft reconciled with the full captured theme CSS.
 * Load after all theme styles/wp_head(); load Caveat 600 separately.
 *
 * Built for the supplied Polo/FBD theme, not a replacement for style.css.
 * Leave the existing root font-size rules intact.
 * Explicit CSS pixel text sizes preserve the existing rem-based layout.
 * Page zoom continues to scale these sizes. Line heights are unitless.
 * Existing Poppins imports supply 400/500/600/700; Caveat 600 is loaded below.
 */

@font-face {
  font-family: 'Caveat';
  src: url('../webfonts/Caveat-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --fbd-type-body-font: 'Poppins', Arial, sans-serif;
  --fbd-type-h1-font: 'Caveat', 'Segoe Print', cursive;
  --fbd-type-h1: 44px;
  --fbd-type-h2: 30px;
  --fbd-type-h3: 24px;
  --fbd-type-h4: 20px;
  --fbd-type-h5: 18px;
  --fbd-type-h6: 16px;
  --fbd-type-body: 16px;
  --fbd-type-lead: 18px;
  --fbd-type-tagline: 20px;
  --fbd-type-card-subtitle: 17px;
  --fbd-type-nav: 16px;
}

@media (min-width: 768px) {
  :root {
    --fbd-type-h1: 56px;
    --fbd-type-h2: 36px;
    --fbd-type-h3: 28px;
    --fbd-type-h4: 22px;
    --fbd-type-h5: 20px;
    --fbd-type-h6: 18px;
    --fbd-type-body: 17px;
    --fbd-type-lead: 19px;
    --fbd-type-tagline: 22px;
    --fbd-type-card-subtitle: 18px;
  }
}

/* The theme's actual navigation breakpoint is separate from the type scale. */
@media (min-width: 992px) {
  :root {
    --fbd-type-nav: 15px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fbd-type-h1: 64px;
    --fbd-type-h2: 40px;
    --fbd-type-h3: 30px;
    --fbd-type-h4: 24px;
    --fbd-type-body: 18px;
    --fbd-type-lead: 20px;
    --fbd-type-tagline: 24px;
  }
}

/* Public content only. No universal font reset: icon fonts keep their family. */
body .body-inner {
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-body);
  font-weight: 400;
  line-height: 1.65;
}

/* Visual aliases let the review show the complete type scale without adding
   extra semantic page headings. :where keeps the common alias rule weak. */
.body-inner :is(h1, h2, h3, h4, h5, h6),
.body-inner
  :where(
    .fbd-type-h1,
    .fbd-type-h2,
    .fbd-type-h3,
    .fbd-type-h4,
    .fbd-type-h5,
    .fbd-type-h6
  ) {
  font-family: var(--fbd-type-body-font);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Match page-title, product-title and slider overrides as well as normal H1s.
   This also beats the existing h1.h3 class on the login page. */
.body-inner h1,
.body-inner .fbd-type-h1,
.body-inner #page-title .page-title > h1,
.body-inner .product-title h1,
.body-inner .heading-text h1,
.body-inner .inspiro-slider .slide .slide-captions h1,
.body-inner #fbd-home-title {
  font-family: var(--fbd-type-h1-font);
  font-size: var(--fbd-type-h1);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}

.body-inner h2,
.body-inner .fbd-type-h2,
.body-inner .heading-text h2,
.body-inner
  .heading-text:is(.heading-section, .heading-plain, .heading-light)
  h2,
.body-inner .inspiro-slider .slide .slide-captions h2 {
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.body-inner h3,
.body-inner .fbd-type-h3,
.body-inner .heading-text h3 {
  font-size: var(--fbd-type-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.body-inner h4,
.body-inner .fbd-type-h4,
.body-inner .heading-text h4 {
  font-size: var(--fbd-type-h4);
  line-height: 1.3;
  letter-spacing: 0;
}

.body-inner h5,
.body-inner .fbd-type-h5,
.body-inner .accordion .ac-item > h5.ac-title {
  font-size: var(--fbd-type-h5);
  font-weight: 600;
  line-height: 1.35;
}

.body-inner h6,
.body-inner .fbd-type-h6 {
  font-size: var(--fbd-type-h6);
  line-height: 1.4;
}

/* Standard text spacing; leave decorative heading-line/section geometry alone. */
.body-inner :is(.wp-content, .prose, .fbd-home-hero-copy) > :is(h1, h2) {
  margin-bottom: 16px;
}
.body-inner :is(.wp-content, .prose) > :is(h3, h4) {
  margin-bottom: 12px;
}
.body-inner :is(.wp-content, .prose) > :is(h5, h6) {
  margin-bottom: 8px;
}

.body-inner p,
.body-inner .fbd-type-body,
.body-inner .heading-text p,
.body-inner :is(.wp-content, .prose, .post-item-description) :is(ul, ol, li),
.body-inner .post-item-description .col-md-12:has(ul) li,
.body-inner .post-item-description .col-md-12:has(ul) ul + p {
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}
.body-inner :is(.wp-content, .prose) > p {
  margin-bottom: 1em;
}
.body-inner :is(p, li) :is(strong, b),
.body-inner .fbd-type-body :is(strong, b) {
  font-weight: 700;
}

/* Inline links keep the surrounding text role; color and an underline make
   their interaction visible in paragraphs, lists and specimen text. */
.body-inner .fbd-inline-link {
  font: inherit;
  letter-spacing: inherit;
  color: #8a4b00;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.body-inner .lead,
.body-inner .fbd-lead,
.body-inner #fbd-home-taming .wp-content > h3 {
  --fbd-type-copy-size: var(--fbd-type-lead);
  --fbd-type-copy-weight: 400;
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-lead);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

/* Existing hero H2 is supporting copy. Future p.fbd-hero-tagline also works. */
.body-inner .fbd-home-hero-copy > h2,
.body-inner .fbd-home-hero-copy > .fbd-hero-tagline {
  --fbd-type-h2-role-size: var(--fbd-type-tagline);
  --fbd-type-h2-role-weight: 500;
  --fbd-type-h2-role-line: 1.4;
  --fbd-type-copy-size: var(--fbd-type-tagline);
  --fbd-type-copy-weight: 500;
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-tagline);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 16px;
}

/* Homepage cards, search results and listing cards have a compact visual title.
   Include heading links because the framework gives them separate font sizes.
   Only listing items get this exception; full single-post H2s remain standard. */
.body-inner .fbd-card-title,
.body-inner h2.fbd-search-title,
.body-inner h2.fbd-search-title > a,
.body-inner .post-item:not(.single-post) .post-item-description > h2,
.body-inner .post-item:not(.single-post) .post-item-description > h2 > a,
.body-inner .product .product-title h3,
.body-inner .product .product-title h3 a,
.body-inner .fbd-home-hero ~ section .wp-content:has(> h2 + h4) > h2 {
  --fbd-type-h2-role-size: var(--fbd-type-h4);
  --fbd-type-h2-role-weight: 600;
  --fbd-type-h2-role-line: 1.3;
  --fbd-type-copy-size: var(--fbd-type-h4);
  --fbd-type-copy-weight: 600;
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-h4);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* A .single-post wrapper can sit outside .post-item in this framework. */
.body-inner .single-post .post-item .post-item-description > h2,
.body-inner .single-post .post-item .post-item-description > h2 > a,
.body-inner .post-item.single-post .post-item-description > h2,
.body-inner .post-item.single-post .post-item-description > h2 > a {
  --fbd-type-h2-role-size: var(--fbd-type-h2);
  --fbd-type-h2-role-weight: 600;
  --fbd-type-h2-role-line: 1.2;
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.body-inner .fbd-card-subtitle,
.body-inner .fbd-home-hero ~ section .wp-content > h2 + h4 {
  --fbd-type-copy-size: var(--fbd-type-card-subtitle);
  --fbd-type-copy-weight: 500;
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-card-subtitle);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Explicit text roles for secondary copy and future CMS blocks. */
.body-inner :is(small, .small, .fbd-meta, .fbd-caption, .fbd-kc-note) {
  --fbd-type-copy-size: 14px;
  --fbd-type-copy-weight: 400;
  font-family: var(--fbd-type-body-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.body-inner .fbd-eyebrow {
  --fbd-type-copy-size: 14px;
  --fbd-type-copy-weight: 600;
  font-family: var(--fbd-type-body-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Match the actual desktop and collapsed-menu selectors in Polo. */
.body-inner #mainMenu nav > ul > li > a,
.body-inner #mainMenu:not(.menu-overlay) nav > ul > li > a,
.body-inner #mainMenu nav > ul > li .dropdown-menu > li > a,
.body-inner #mainMenu nav > ul > li .dropdown-menu > li > span,
.body-inner
  #mainMenu
  nav
  > ul
  > li
  .dropdown-menu
  > li
  [class*='col-']
  > ul
  > li
  > a,
.body-inner #mainMenu:not(.menu-overlay) nav > ul > li .dropdown-menu > li > a {
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-nav);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.body-inner :is(input, select, textarea),
.body-inner .form-control,
.body-inner .form-select {
  font-family: var(--fbd-type-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.body-inner form label,
.body-inner .gfield_label,
.body-inner .fbd-form-label {
  font-family: var(--fbd-type-body-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* Existing mobile buttons have a fixed 32px height. Use flexible sizing for
   ordinary text buttons so 16px labels and wrapping fit. Modal close buttons,
   creative/slide variants and both header search forms are excluded. */
.body-inner
  button.btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide),
.body-inner .btn:not(.close):not(.mfp-close):not(.btn-creative):not(.btn-slide),
.body-inner
  a.btn:not([href]):not([tabindex]):not(.close):not(.mfp-close):not(
    .btn-creative
  ):not(.btn-slide),
.body-inner .gform_button,
.body-inner .wp-element-button,
.body-inner .wp-block-button__link,
.body-inner
  form:not(.fbd-header-search):not(:where(#fbd-search-form))
  :is(button[type='submit'], input[type='submit']) {
  font-family: var(--fbd-type-body-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  height: auto;
  min-height: 44px;
  max-width: 100%;
  padding: 11px 18px;
}

/* Table text is a distinct role. Keep existing table responsive behavior.
   Values live on the container so a p.fbd-caption inside a table stays small. */
.body-inner :is(.fbd-kc-table, #datatable, .fbd-data-table) {
  --fbd-type-copy-size: 16px;
  --fbd-type-copy-weight: 400;
}
.body-inner :is(.fbd-kc-table, #datatable, .fbd-data-table),
.body-inner :is(.fbd-kc-table, #datatable, .fbd-data-table) :is(th, td, p) {
  font-family: var(--fbd-type-body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.body-inner :is(.fbd-kc-table, #datatable, .fbd-data-table) th {
  font-weight: 600;
  line-height: 1.4;
}
.body-inner #datatable td h4 {
  font-family: var(--fbd-type-body-font);
  font-size: var(--fbd-type-h4);
  font-weight: 600;
  line-height: 1.3;
}

.body-inner #footer {
  --fbd-type-copy-size: 15px;
  --fbd-type-copy-weight: 400;
}

.body-inner #footer,
.body-inner #footer p,
.body-inner #footer .list li,
.body-inner #footer .list li a {
  font-family: var(--fbd-type-body-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}
.body-inner #footer .widget .widget-title,
.body-inner #footer .widget h4 {
  --fbd-type-copy-size: 16px;
  --fbd-type-copy-weight: 600;
  font-family: var(--fbd-type-body-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.body-inner #footer .copyright-text,
.body-inner #footer .copyright-text a {
  --fbd-type-copy-size: 14px;
  --fbd-type-copy-weight: 400;
  font-family: var(--fbd-type-body-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* Third-party iframe/shadow-root testimonial text is controlled separately
   by its provider; this stylesheet does not attempt to cross that boundary. */

/* Legacy-important compatibility: the root theme stylesheet forces H1 size,
   H2 size/weight/line-height, and paragraph size/weight. Only those conflicting
   properties need !important here. The role variables above preserve compact
   card titles, the hero tagline, lead text, small copy, tables and footer copy.
   The search/hero selectors match the root theme's more specific rules.
   Do not remove this block until the matching legacy rules are removed. */
.body-inner h1 {
  font-size: var(--fbd-type-h1) !important;
}

.body-inner h2,
.body-inner .fbd-home-hero-copy h2,
.body-inner .fbd-search-results h2.fbd-search-title,
.body-inner .fbd-search-empty h2 {
  font-size: var(--fbd-type-h2-role-size, var(--fbd-type-h2)) !important;
  font-weight: var(--fbd-type-h2-role-weight, 600) !important;
  line-height: var(--fbd-type-h2-role-line, 1.2) !important;
}

.body-inner p {
  font-size: var(--fbd-type-copy-size, var(--fbd-type-body)) !important;
  font-weight: var(--fbd-type-copy-weight, 400) !important;
}