/*
  base.css
  Shared styles for every component. Load this first, then the css file
  for each component you use (or just load dist/farminguk.css).

  Every component's outer element has the class "fm", so the styles here
  only apply inside our own markup and won't touch the rest of the site.

  Fonts are loaded in the page <head>, not here:
  Literata for headlines, Hanken Grotesk for everything else.
*/

/* Colours, type sizes and spacing. Change them here and it updates everywhere. */
:root {
  --fm-blue: #00557e;          /* logo blue: links, buttons, labels */
  --fm-blue-deep: #00334d;     /* dark blue: newsletter band and footer */
  --fm-blue-tint: #eef4f8;     /* pale blue: image placeholder background */
  --fm-ink: #0f1b24;           /* main text */
  --fm-muted: #566672;         /* dates and standfirsts, still readable on white */
  --fm-rule: #dbe3e9;          /* thin divider lines */
  --fm-bg: #fff;
  --fm-wash: #f4f6f8;          /* very faint grey-blue behind the page, so white cards stand out */

  --fm-serif: "Literata", Georgia, "Times New Roman", serif;
  --fm-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Text sizes. The larger ones scale smoothly between phone and desktop. */
  --fm-t-xs: 0.8125rem;
  --fm-t-sm: 0.9375rem;
  --fm-t-md: 1.125rem;
  --fm-t-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fm-t-xl: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
  --fm-t-display: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);

  /* Spacing: gap between items, and space between whole sections */
  --fm-gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem);
  --fm-section: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);

  --fm-radius: 10px;           /* card and image corners */
  --fm-max: 78rem;             /* widest the page content gets */
}

/* Put this class on <body> (or the page wrapper) to get the faint background wash.
   It's separate from .fm because it belongs to the page, not to a single component. */
.fm-page { margin: 0; background: var(--fm-wash); }

/* ---------- Basics for everything inside a component ---------- */
.fm {
  font-family: var(--fm-sans);
  font-size: var(--fm-t-md);
  line-height: 1.6;
  color: var(--fm-ink);
  -webkit-font-smoothing: antialiased;
}
.fm *, .fm *::before, .fm *::after { box-sizing: border-box; }

/* :where() keeps these resets weak, so a component's own rules always win */
.fm :where(a) { color: inherit; text-decoration: none; }
.fm :where(img) { display: block; max-width: 100%; height: auto; }
.fm :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.fm :where(h1, h2, h3, p, figure) { margin: 0; }

/* All headlines use the serif. Components just set the size. */
.fm :where(h1, h2, h3) {
  font-family: var(--fm-serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;          /* avoids a single word on the last line */
}

/* Visible outline when tabbing with the keyboard */
.fm :where(a):focus-visible, .fm :where(summary):focus-visible,
.fm :where(input):focus-visible, .fm :where(button):focus-visible {
  outline: 2px solid var(--fm-blue);
  outline-offset: 3px;
}

/* ---------- Page width ---------- */
/* Centres content. The side margin grows with the screen (20px on phones, up to 48px
   each side on big screens) so the background wash always shows down both edges. */
.fm-wrap { width: min(100% - clamp(2.5rem, 6vw, 6rem), var(--fm-max)); margin-inline: auto; }

/* ---------- Bits used by several components ---------- */

/* Small blue category label above a headline, e.g. "Livestock" */
.fm-kicker { margin-bottom: 0.5rem; font-size: var(--fm-t-sm); font-weight: 600; line-height: 1.3; color: var(--fm-blue); }

/* Date line under a story */
.fm-meta { margin-top: 0.6rem; font-size: var(--fm-t-xs); color: var(--fm-muted); }

/* Image wrapper: rounded corners, and the image is cropped (not squashed) to fit */
.fm-media { overflow: hidden; border-radius: var(--fm-radius); background: var(--fm-blue-tint); }
.fm-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s ease; }

/* Section title, e.g. "Latest news" */
.fm-heading { margin-bottom: var(--fm-gap); font-size: var(--fm-t-xl); line-height: 1.1; }

/* Title on the left, "View all" link on the right. Wrap a .fm-heading and a
   .fm-more-link in this. */
.fm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--fm-gap); }
.fm-section-head .fm-heading { margin-bottom: 0; }
.fm-section-head .fm-more-link { margin-top: 0; white-space: nowrap; }

/* "All news →" style link */
.fm-more-link { display: inline-block; margin-top: 1.5rem; font-size: var(--fm-t-sm); font-weight: 700; color: var(--fm-blue); }
.fm-more-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Story cards ---------- */
/* A white box on the page wash: image flush along the top, text padded underneath.
   The only link in a card is the one around the headline text. That keeps the
   HTML simple for CKEditor. The ::after below stretches that link over the whole
   card, so clicking the image or the date still opens the story. */
.fm-card { position: relative; overflow: hidden; border-radius: var(--fm-radius); background: #fff; }
.fm-card :where(h1, h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.fm-card:hover :where(h1, h2, h3) a { color: var(--fm-blue); }
.fm-card:hover .fm-media img { transform: scale(1.03); }
.fm-card .fm-media { border-radius: 0; }          /* the card already rounds the corners */
.fm-card__body { padding: 1.1rem 1.25rem 1.35rem; }
.fm-card__body .fm-kicker { margin-bottom: 0.4rem; }

/* A plain white box for lists that aren't a single story (e.g. "Most read") */
.fm-panel { padding: 1.5rem 1.25rem; border-radius: var(--fm-radius); background: #fff; }

/* Grid of cards: 1 across on phones, 2 on tablets, 4 on desktop */
.fm-grid { display: grid; gap: var(--fm-gap) calc(var(--fm-gap) * 0.6); }
@media (min-width: 40rem) { .fm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .fm-grid { grid-template-columns: repeat(4, 1fr); } }
.fm-grid .fm-card h3 { font-size: var(--fm-t-md); line-height: 1.25; }

/* ---------- Buttons ---------- */
/* White button, used on the dark blue newsletter band */
.fm-button {
  padding: 1rem 1.75rem;
  font: inherit; font-size: var(--fm-t-sm); font-weight: 700;
  color: var(--fm-blue-deep); background: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
}
.fm-button:hover { background: var(--fm-blue-tint); }