/* base.css: global element styles and typography utilities (ported from foodforjoe.es globals). */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 200px;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  position: relative;
  background: var(--color-white);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* Component display rules must not override the hidden attribute */
[hidden] {
  display: none !important;
}

/* Root text style: every page is wrapped in .body */
.body {
  font-variation-settings: var(--gp-light-axes);
  font-family: var(--font-family-serif-light);
  font-size: var(--ffj-font-body);
  line-height: var(--ffj-leading-body);
  color: var(--color-green);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

.homepageTitle,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  letter-spacing: var(--ffj-tracking-heading);
}

/* ── Type utilities ───────────────────────────────────────────────────── */
.homepageTitle {
  font-weight: 400;
  font-size: var(--ffj-font-display);
  line-height: var(--ffj-leading-tight);
}

.homepageHandwritten {
  font-size: var(--ffj-font-script);
}

.handwritten,
.homepageHandwritten {
  font-family: var(--font-family-handwritten);
  font-weight: 400;
  line-height: 1.041;
}

.highlighted {
  color: var(--color-dark-yellow);
  font-size: 1.3em;
  font-weight: 700;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
}

.headline {
  font-size: var(--ffj-font-headline);
  letter-spacing: var(--ffj-tracking-heading);
}

.headline,
.subtitle {
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-weight: 500;
  line-height: var(--ffj-leading-heading);
}

.subtitle {
  font-size: var(--ffj-font-subtitle);
}

/* <strong> is reset and re-styled as the medium weight of Cooper */
strong {
  all: unset;
}

.sectionHeader,
strong {
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-weight: 400;
}

.sectionHeader {
  font-size: var(--ffj-font-eyebrow);
  line-height: 17px;
  filter: contrast(0.9);
  color: var(--color-dark-yellow);
  letter-spacing: var(--ffj-tracking-eyebrow);
  text-transform: uppercase;
}

.lead {
  font-size: 18px;
  line-height: 21px;
}

.label,
.lead {
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  font-weight: 500;
  letter-spacing: var(--ffj-tracking-heading);
}

.label {
  font-size: 28px;
  line-height: 34px;
}

.label .handwritten {
  font-size: 54px;
  color: var(--color-dark-yellow);
}

.link,
.linkBold {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.errorHint,
.linkBold {
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
}

.errorHint {
  color: var(--color-error);
  margin: 20px 0 0;
  font-size: 14px;
}

@media (min-width: 960px) {
  .label {
    font-size: 48px;
    line-height: 58px;
  }
  .label .handwritten {
    font-size: 81px;
  }
  .lead {
    font-size: 24px;
    line-height: 29px;
  }
}

.layoutComponentContainer {
  min-height: calc(100vh - 490px);
}

/* Inline emoji images (❌ 🐱 🐶) used inside copy */
.emoji {
  margin-bottom: -3px;
}

/* Visually hidden, for accessible labels */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}