/* FDS Group typography — Inter body + League Spartan headings (futureofficeit.co.uk)
   Load AFTER styles.css and vs-draft.css on every page.
   Revert: docs/TYPOGRAPHY-BASELINE-VENDING.md */

:root {
  --fds-font-body: Inter, "Segoe UI", Arial, sans-serif;
  --fds-font-heading: "League Spartan", Inter, "Segoe UI", Arial, sans-serif;
  --nav-font: var(--fds-font-body);
  --hero-title-size: 2.75rem;
  --hero-title-size-mobile: clamp(1.45rem, 6.5vw, 1.75rem);
  --vs-section-title-size: 2.125rem;
  --vs-body-lead-size: 1rem;
}

body {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fds-font-heading);
}

h1 {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.035rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.125rem;
  font-weight: 400;
  letter-spacing: -0.03rem;
  line-height: 1.2;
}

h3 {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.025rem;
  line-height: 1.2;
}

h4 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

h5 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.015rem;
  line-height: 1.4;
}

h6 {
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.0125rem;
  line-height: 1.4;
}

p,
li,
label,
input,
select,
textarea,
button {
  font-family: inherit;
}

.lead {
  font-family: var(--fds-font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Section taglines — FO .text-style-tagline */
.eyebrow:not(.eyebrow-dark):not(.eyebrow-gold) {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow:not(.eyebrow-dark)::before {
  display: none;
}

.eyebrow-gold {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: normal;
}

/* Hero eyebrow pill — FO .tag.is-alternate */
.page-hero .page-hero-content .eyebrow,
.page-hero .page-hero-content .eyebrow-dark,
.simple-hero .eyebrow,
.guided-contact-hero .eyebrow,
.lp-page-hero .eyebrow {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
}

/* Heroes — FO .heading-style-h1 */
.page-hero .page-hero-content h1,
.simple-hero h1,
.guided-contact-hero h1,
.lp-page-hero .lp-hero-copy h1,
.category-hero .page-hero-content h1,
.home-page-hero .page-hero-content h1 {
  font-family: var(--fds-font-heading);
  font-size: var(--hero-title-size);
  font-weight: 400;
  letter-spacing: -0.035rem;
  line-height: 1.2;
}

.page-hero .page-hero-content > p,
.page-hero .page-hero-content .lead,
.simple-hero .lead,
.guided-contact-hero .lead,
.hero-copy > p,
.lp-page-hero .lp-hero-copy > p,
.section-heading > p,
.catalogue-section .section-heading > p,
.type-switcher + .catalogue-section .section-heading > p,
.type-switcher + .section + .catalogue-section .section-heading > p,
.managed-copy .lead,
.faq-intro > p,
.faq-section--split .faq-intro > p,
.cta-band--compact p,
.cta-band-inner > div > p,
.industry-preview .section-heading > p,
.type-explore .section-heading > p,
.type-switcher .section-heading > p,
.home-pillars .section-heading > p,
.home-coffee-picks .section-heading > p,
.trust-copy p,
.centred-heading p,
.about-who__copy .lead,
.about-who__copy > p:not(.lead),
.buying-guide > p,
.guide-intro p,
.buying-guide .guide-intro > p,
.brand-section .section-heading > p,
.related-section .section-heading > p {
  font-family: var(--fds-font-body);
  font-size: var(--vs-body-lead-size);
  font-weight: 400;
  line-height: 1.45;
}

/* Section headings — FO .heading-style-h2 */
.section-heading h2,
.managed-copy h2,
.faq-intro h2,
.faq-section--split .faq-intro h2,
.cta-band h2,
.centred-heading h2,
.support-section .centred-heading h2,
.trust-copy h2,
.industry-preview .section-heading h2,
.type-explore .section-heading h2,
.home-pillars .section-heading h2,
.home-coffee-picks .section-heading h2,
.about-who__copy h2,
.buying-guide h2,
.catalogue-section .section-heading h2,
.industry-detail-intro h2 {
  font-family: var(--fds-font-heading);
  font-size: var(--vs-section-title-size);
  font-weight: 400;
  letter-spacing: -0.03rem;
  line-height: 1.2;
}

.blog-index-header h1,
.blog-post-header h1 {
  font-family: var(--fds-font-heading);
  font-size: 2.125rem;
  font-weight: 400;
  letter-spacing: -0.03rem;
  line-height: 1.2;
}

/* Product pages — keep intro lighter than section h2s */
.product-page .product-summary h1,
.product-summary h1 {
  font-family: var(--fds-font-heading);
  font-size: clamp(2rem, 2.85vw, 2.85rem);
  font-weight: 400;
  letter-spacing: -0.03rem;
  line-height: 1.12;
}

.product-page .product-summary .lead,
.product-summary .lead {
  font-size: 1.02rem;
  line-height: 1.48;
}

.product-page .product-visual .product-brand,
.product-visual .product-brand {
  font-family: var(--fds-font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: uppercase;
}

.spec-table th,
.spec-table td {
  font-family: var(--fds-font-body);
}

/* Non-PDP spec tables only; product pages use vs-draft.css */
body:not(.product-page) .spec-table th,
body:not(.product-page) .spec-table td {
  font-size: 1rem;
  line-height: 1.5;
}

.highlight-list li,
.fact-chip,
.filter-chip {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
  font-weight: 500;
}

/* Card / tile titles */
.type-card h3,
.type-card--switch h3,
.pillar-card__body h3,
.industry-card-content h3,
.cta-tool-card h3,
.resource-card h3,
.guide-card-grid h3,
.product-card h3,
.home-coffee-card__body h3,
.feature-list h3,
.process-card-grid h3,
.support-card-grid h3,
.shortlist-card__body h3,
.industry-detail-card h3,
.workplace-card h3,
.service-content h3 {
  font-family: var(--fds-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.015rem;
  line-height: 1.4;
}

.type-explore .type-card--visual h3,
.type-grid--switch-light .type-card--switch h3 {
  font-size: 1.175rem;
  letter-spacing: -0.0125rem;
}

.home-coffee-picks__sector-title {
  font-family: var(--fds-font-heading);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.025rem;
  line-height: 1.2;
}

.home-coffee-picks__tab {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
  font-weight: 500;
}

.home-coffee-card__body h3 {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
}

.product-brand,
.home-coffee-card__body .product-brand,
.shortlist-card__body .product-brand,
.product-card .product-brand {
  font-family: var(--fds-font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: normal;
  text-transform: uppercase;
}

.type-card p,
.pillar-card__body p,
.industry-card-content p,
.cta-tool-card p,
.product-card p,
.shortlist-card__body p,
.guide-card-grid p,
.resource-card p {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.text-link,
.type-card .text-link,
.pillar-card__body .text-link,
.industry-grid-all .text-link,
.home-coffee-card__body .text-link,
.product-card .text-link {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
  font-weight: 500;
}

/* FAQ / accordion */
.accordion summary,
.faq-section--split .accordion summary,
.faq-section .accordion summary {
  font-family: var(--fds-font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
}

.accordion details p,
.faq-section--split .accordion details p {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.faq-help h3 {
  font-size: 1.25rem;
}

.faq-help p {
  font-size: 1rem;
}

/* Buttons — FO .button */
.button {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.button-small {
  font-size: 0.875rem;
}

.managed-copy .button {
  font-size: 1rem;
}

/* Header / utility / footer */
.utility-bar,
.primary-nav,
.site-footer,
.site-header,
.fds-network-bar {
  font-family: var(--fds-font-body);
}

.utility-bar {
  font-size: 0.875rem;
  font-weight: 400;
}

.utility-pill,
.utility-contact a {
  font-weight: 500;
}

.primary-nav {
  font-size: 0.9375rem;
  font-weight: 500;
}

.primary-nav > .nav-quote,
.primary-nav > .nav-action {
  font-size: 0.875rem;
}

.dropdown-panel strong {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  font-weight: 500;
}

.dropdown-panel small {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
  font-weight: 400;
}

.breadcrumbs {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
}

.site-footer h3,
.footer-grid h3 {
  font-family: var(--fds-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.015rem;
  line-height: 1.4;
}

.site-footer,
.site-footer p,
.site-footer a,
.site-footer li,
.footer-grid > div > a:not(.brand),
.footer-grid address,
.footer-bottom p,
.footer-bottom__copy,
.footer-bottom__legal,
.footer-bottom > div,
.footer-brand p {
  font-family: var(--fds-font-body);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Calculators / forms / filters */
.profit-calculator,
.calculator-panel,
.calculator-field-label,
.calculator-input,
.contact-form label,
.contact-form input,
.contact-form select,
.contact-form textarea,
.catalogue-toolbar label,
.catalogue-count,
.filter-panel,
.filter-chip strong {
  font-family: var(--fds-font-body);
}

.profit-calculator__cta {
  font-family: var(--fds-font-body);
  font-weight: 500;
}

/* Testimonials / quotes */
.testimonial blockquote {
  font-family: var(--fds-font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.025rem;
}

.featured-quote blockquote {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.testimonial figcaption span,
.featured-quote figcaption span {
  font-size: 0.875rem;
}

/* Blog */
.blog-card h3,
.blog-post-content h2,
.blog-post-content h3 {
  font-family: var(--fds-font-heading);
}

.blog-card p,
.blog-post-content p {
  font-family: var(--fds-font-body);
  font-size: 1rem;
  line-height: 1.5;
}

/* Cookie / misc UI */
.cookie-banner:not(.cookie-banner--consent) h2 {
  font-size: 1.25rem;
  font-weight: 400;
}

.cookie-banner--consent .cookie-banner__title,
.cookie-banner--consent #cookie-manage-title {
  font-family: var(--fds-font-display);
}

.cookie-banner--consent .cookie-banner__title {
  font-weight: 600;
}

.cookie-banner--consent #cookie-manage-title {
  font-weight: 400;
}

.cookie-banner:not(.cookie-banner--consent) p {
  font-size: 0.875rem;
}

.cookie-banner--consent .cookie-banner__intro,
.cookie-banner--consent p {
  font-family: var(--fds-font-body);
}

/* Tablet — FO ~991px */
@media (max-width: 991px) {
  .page-hero .page-hero-content h1,
  .simple-hero h1,
  .guided-contact-hero h1,
  .home-page-hero .page-hero-content h1 {
    font-size: 3rem;
  }

  .product-page .product-summary h1,
  .product-summary h1 {
    font-size: clamp(1.85rem, 4.2vw, 2.55rem);
  }

  h2,
  .section-heading h2,
  .managed-copy h2,
  .faq-section--split .faq-intro h2,
  .cta-band h2 {
    font-size: 2.125rem;
  }
}

/* Mobile — coffee hub scale (category hero title + intro) sitewide */
@media (max-width: 767px) {
  :root {
    --vs-section-title-size: clamp(1.2rem, 5vw, 1.45rem);
    --vs-body-lead-size: 0.9rem;
  }

  h1,
  .page-hero .page-hero-content h1,
  .simple-hero h1,
  .guided-contact-hero h1,
  .home-page-hero .page-hero-content h1,
  .lp-page-hero .lp-hero-copy h1 {
    font-size: var(--hero-title-size-mobile);
    line-height: 1.2;
  }

  .product-page .product-summary h1,
  .product-summary h1 {
    font-size: var(--hero-title-size-mobile);
    font-weight: 700;
    line-height: 1.15;
  }

  .product-page .product-summary .lead,
  .product-summary .lead {
    font-size: var(--vs-body-lead-size);
    line-height: 1.45;
  }

  h2,
  .section-heading h2,
  .managed-copy h2,
  .faq-section--split .faq-intro h2,
  .faq-intro h2,
  .cta-band h2,
  .cta-band--compact h2,
  .centred-heading h2,
  .trust-copy h2,
  .industry-preview .section-heading h2,
  .type-explore .section-heading h2,
  .home-pillars .section-heading h2,
  .home-coffee-picks .section-heading h2,
  .type-switcher .section-heading h2,
  .buying-guide .guide-intro h2,
  .buying-guide h2,
  .catalogue-section .section-heading h2,
  .brand-section .section-heading h2,
  .related-section .section-heading h2,
  .values-section .section-heading h2,
  .guide-intro h2 {
    font-size: var(--vs-section-title-size);
    line-height: 1.2;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.125rem;
  }

  .lead,
  .section-heading > p,
  .managed-copy .lead,
  .page-hero .page-hero-content > p,
  .page-hero-content > p,
  .simple-hero .lead,
  .guided-contact-hero .lead,
  .faq-section--split .faq-intro > p,
  .faq-intro > p,
  .cta-band--compact p,
  .cta-band-inner > div > p,
  .type-explore .section-heading > p,
  .industry-preview .section-heading > p,
  .home-pillars .section-heading > p,
  .type-switcher .section-heading > p,
  .catalogue-section .section-heading > p,
  .buying-guide .guide-intro > p,
  .accordion summary,
  .faq-section--split .accordion summary {
    font-size: var(--vs-body-lead-size);
    line-height: 1.45;
  }

  .page-hero-content .eyebrow,
  .page-hero .page-hero-content .eyebrow,
  .page-hero .page-hero-content .eyebrow-dark,
  .home-page-hero .page-hero-content .eyebrow {
    font-size: 0.875rem;
  }

  .home-coffee-picks__sector-title {
    font-size: 2rem;
  }

  .type-card h3,
  .pillar-card__body h3,
  .industry-card-content h3,
  .cta-tool-card h3,
  .product-card h3 {
    font-size: 1.25rem;
  }

  .primary-nav > a:not(.button),
  .nav-dropdown > summary {
    font-size: 1rem;
    font-weight: 500;
  }
}