/* ===== HTFP Jobs — Jobboardly custom CSS overrides ===== */
/* Paste this into the Jobboardly board's custom CSS setting (htfp-jobs.jobboardly.com).
   Not loaded by the Ghost theme; kept here for versioning. Last applied 2026-10-29.
   NOTE: Jobboardly strips backslashes from pasted CSS, so never use escaped
   Tailwind selectors like .lg:flex here; use [class~="lg:flex"] instead. */

/* ---- 1. Header logo: the Ghost site's masthead, at the same size ----
   Jobboardly only serves its uploaded logo at 512px wide, which is too small
   and goes soft when enlarged, and it BLOCKS external url() in custom CSS,
   so the image is swapped by the small script in jobboardly-logo.js (paste
   that into the board's custom JavaScript setting). The Ghost site shows a
   900×130 file capped at 120px tall (831×120). The width is fixed rather
   than capped so the box is 831×120 from the first paint: the 512px upload
   stretches into it (both files are the same 6.92:1 shape, so it is simply
   a little soft) and the script's swap then sharpens it with no jump. */
#board-logo {
  width: min(831px, calc(100vw - 6rem)) !important;
  max-width: none !important;
  height: auto !important;
  max-height: 120px !important;
}

/* Tagline under the logo, like the Ghost header's site description
   (Inter 15px/550, 6px under the logo), in the jobs green. The logo link
   is the only element to hang it on, so it is a ::after on that link. */
header .mb-3 > a {
  display: block;
  text-align: center;
}
header .mb-3 > a::after {
  content: "Journalism and PR jobs from across the UK";
  display: block;
  margin-top: 6px;
  font-family: Inter, "Inter var", sans-serif;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.3;
  color: #5b6915;
}

/* ---- 2. Surfaces: cream instead of pale green ----
   The apply box, "More jobs" cards, company cards etc. all read
   --token-colors-surface. Setting it on body overrides the board's :root value. */
body {
  --token-colors-surface: #fefef2;
}
/* Listing page section is inline-styled #fefef2; make it white like the
   main site's body so the header logo and page share one background. */
section[data-theme-jobs-region="board"] {
  background-color: #ffffff !important;
  padding-top: 0.5rem !important;      /* sit close under the intro text */
}
section[data-theme-jobs-region="board"] > .max-w-6xl {
  padding-top: 0.5rem;
}

/* Job listing cards: the board inline-styles a green tint and glow on top of
   the surface, so these need !important. Lime border and left bar are kept. */
[data-theme-jobs-list] > a {
  background: #ffffff !important;   /* white cards, lime border */
  box-shadow: inset 4px 0 0 var(--token-colors-primary) !important;
}
[data-theme-jobs-list] > a:hover {
  box-shadow: inset 4px 0 0 var(--token-colors-primary),
              0 6px 16px rgb(0 0 0 / 0.08) !important;
}
/* Phone: Jobboardly's card puts the Featured badge, star and age in a
   no-shrink cluster beside the title, which at 375px leaves the title and
   meta a 60px column (title truncated to "Edi...", one word per line).
   Under 640px the cluster drops below the text instead and the title wraps.
   (The job page's "More jobs" cards are simpler markup and already fine.) */
@media (max-width: 639px) {
  [data-theme-jobs-list] > a .flex-1.min-w-0 > .justify-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  [data-theme-jobs-list] > a h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* ---- 3. Filter column: pale green tray, white controls ----
   Every filter surface reads --token-colors-surface / --token-colors-border,
   which the board sets to the same green + lime as the job cards. Redefining
   the tokens on the wrapper recolours the tray, cards and popovers together. */
.theme-builder-jobs-filters {
  --token-colors-surface: #ffffff;        /* filter cards + popover */
  --token-colors-surface-hover: #f3f1e8;  /* checklist row hover */
  --token-colors-border: #d9d4c4;         /* soft neutral instead of lime */
  background: #e9eed0 !important;         /* the main site's jobs-widget green */
  border-color: #d2d8b4 !important;
  box-shadow: none !important;
}
.theme-builder-jobs-filters .filter-card {
  background: #ffffff;
  border: 1px solid #d9d4c4;
}
.theme-builder-jobs-filters .filter-card:hover,
.theme-builder-jobs-filters .filter-card:focus-within {
  border-color: #acc42a;
  box-shadow: none;
}
/* A filter with something selected: solid green edge so it stands out */
.theme-builder-jobs-filters .filter-card[data-active="true"] {
  border-color: #5b6915;
  box-shadow: inset 0 0 0 1px #5b6915;
}
/* Open dropdown: white panel, visible edge, lifted off whatever is behind it */
.theme-builder-jobs-filters .filter-popover {
  background: #ffffff;
  --tw-ring-color: #bfb9a6;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
}
.theme-builder-jobs-filters .filter-checklist-option:hover {
  background: #f3f1e8;
}

/* ---- 4. Lime text on light backgrounds is hard to read ----
   Company name on the job page uses the primary colour as text. Use the
   darker green from the main site's jobs widget for text links only;
   the lime stays for borders, icons and the avatar. */
a[class*="text-[color:var(--primary-color)]"] {
  color: #7a8f11;
}
a[class*="text-[color:var(--primary-color)]"]:hover {
  color: #5b6915;
}

/* ---- 5. Header: white brand row, pale green band only behind the links ----
   Mirrors the Ghost theme's stacked nav: the header goes white and a
   full-width cream strip, ruled top and bottom, sits behind the 60px
   desktop menu row. The band is a ::before anchored to the header (the
   nearest positioned ancestor), so it spans the viewport. On tablet and
   phone the links row is hidden, so the header is plain white, as on the
   main site. */
header {
  --header-background-color: #ffffff;
  border-bottom-color: rgb(0 0 0 / 0.08) !important;
}
header .max-w-5xl.flex-col {
  padding-top: 12px !important;      /* Ghost brand row: logo 12px from the top */
  padding-bottom: 0 !important;
}
@media (min-width: 1024px) {
  /* The band is the same width as the Ghost theme's menu band: the theme's
     1320px container inside max(4vmin, 20px) page gutters (so 1320px on a
     wide screen; since 2026-10-08 the Ghost band spans the whole container,
     with no 48px menu margin taken off). The content column (section 12)
     and the footer box (section 9) use the same formula, so the three line
     up edge for edge. The band carries its own top and bottom rules, so the
     header's full-width rule is hidden here (it stays on tablet and phone,
     where there is no band). */
  header {
    border-bottom-color: transparent !important;
  }
  header [class~="lg:flex"].items-center.gap-6 {
    height: 60px;
  }
  header [class~="lg:flex"].items-center.gap-6::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1320px, 100% - 2 * max(4vmin, 20px));   /* Ghost container */
    height: 60px;
    transform: translateX(-50%);
    box-sizing: border-box;
    background-color: #e9eed0;         /* same pale green as the filter tray */
    border-top: 1px solid rgb(0 0 0 / 0.08);
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
  }
  header [class~="lg:flex"].items-center.gap-6 > * {
    position: relative;
  }
}
/* Tablet (768px to 1023px, where the board hides its links row): the Ghost
   header is one row of burger | logo + description | search, Sign in and
   Subscribe, inside max(4vmin, 20px) page gutters. The logo takes whatever
   is left: the gutters, a 44px burger slot and the 263px actions cluster
   come off the viewport width (307px in all). The board has no actions
   cluster, so its logo is given the same width and position as Ghost's and
   its burger moves into the slot on the left, where Ghost's is. */
@media (min-width: 768px) and (max-width: 1023px) {
  header nav {
    padding-left: max(4vmin, 20px) !important;
    padding-right: max(4vmin, 20px) !important;
  }
  header .max-w-5xl.flex-col {
    position: relative;                /* the burger centres on this block, not
                                          the header, which grows when the
                                          menu panel (a sibling) opens */
    max-width: none;
    align-items: flex-start;
    padding-left: 44px;                /* burger slot */
    padding-bottom: 12px !important;   /* Ghost brand row: 12px top and bottom */
  }
  header .mb-3 {
    margin-bottom: 0 !important;
  }
  #board-logo {
    width: min(831px, calc(100vw - 2 * max(4vmin, 20px) - 307px)) !important;
  }
  header .absolute[class~="lg:hidden"] {
    right: auto;
    left: -10px;                       /* measured from the brand block, which
                                          already starts at the gutter. Ghost's
                                          32px "more" toggle sits 6px outside
                                          the gutter; this 40px button has 8px
                                          of padding, so -10px lines the icons up */
    top: 50%;
    transform: translateY(-50%);
  }
}
/* Phone (under 768px): Ghost's brand row is a grid of logo | search | burger
   inside 20px gutters, so the logo starts at the gutter and gives up 57px
   (28px search + 29px burger) on the right; the description sits
   left-aligned under it at 13px. The board has no search, but the same
   57px is reserved so the logo is the same width and in the same place,
   and the burger icon lands where Ghost's does. */
@media (max-width: 767px) {
  header nav {
    padding-left: max(4vmin, 20px) !important;
    padding-right: max(4vmin, 20px) !important;
  }
  header .max-w-5xl.flex-col {
    position: relative;                /* burger centres on the brand block */
    max-width: none;
    align-items: flex-start;
    padding-right: 57px;               /* Ghost's search + burger columns */
    padding-bottom: 12px !important;
  }
  header .mb-3 {
    margin-bottom: 0 !important;
  }
  header .mb-3 > a {
    text-align: left;
  }
  header .mb-3 > a::after {
    font-size: 13px;                   /* Ghost .gh-navigation-description on phones */
  }
  #board-logo {
    width: calc(100vw - 2 * max(4vmin, 20px) - 57px) !important;
  }
  header .absolute[class~="lg:hidden"] {
    left: auto;
    right: -11px;                      /* Ghost's 32px burger overhangs the gutter
                                          by 7px; with this button's 8px padding
                                          the two 24px icons coincide */
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ---- 6. Typography: Georgia bold headings in the jobs green ----
   Client choice (2026-10-20): titles on the board are the darker jobs-widget
   green #5b6915, not the main site's maroon.
   The board sets heading fonts via a :root token and heading colour via
   inline style="color: var(--token-colors-text-primary)", so the token is
   redefined on the heading itself. Footer headings are handled in section 9. */
/* The [class] variants outrank Tailwind's single-class size/weight utilities
   (text-3xl, font-semibold, sm:text-xl ...), which a bare h1 would lose to. */
h1, h2, h3, h4,
h1[class], h2[class], h3[class], h4[class] {
  font-family: Georgia, Gelasio, "Times New Roman", Times, serif;
  font-weight: 700;
  --token-colors-text-primary: #5b6915;
  color: #5b6915;
}
/* Page titles: Ghost's .gh-article-title (fluid 34px to 46px, as on the tags
   page); section headings: Ghost's .gh-content h2 (1.6 x 17px body). */
h1, h1[class] {
  font-size: clamp(34px, 28.5px + 1.36vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
h2, h2[class] {
  font-size: 27.2px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
/* The listing's "All jobs" heading and its "N jobs listed" line are hidden:
   the intro section above already carries the page title, and the
   "Showing 1–N of N" label still gives the count. */
section[data-theme-jobs-region="board"] h1,
section[data-theme-jobs-region="board"] h1 + p {
  display: none;
}
/* Job card titles (h3) and "More jobs" titles: a little larger for Georgia */
[data-theme-jobs-list] > a h3,
#similar-jobs h3 {
  font-size: 1.2rem;
}

/* ---- 7. Buttons: pills like Ghost's Subscribe, in the jobs green ----
   Client decision (2026-10-20): everything jobs-related is green, not
   maroon, so every button is #5b6915 including the header ones.
   --button-color is declared on :root from a token, so it is re-declared on
   body rather than the token. Covers Sign up, Post a job, Apply now,
   Apply filters and the mobile menu buttons. */
body {
  --button-color: #5b6915;
  --button-color-hover: #4a5511;
}
a[class*="bg-[color:var(--button-color)]"],
button[class*="bg-[color:var(--button-color)]"] {
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
}

/* ---- 8. Nav links, body text and links ----
   Ghost: nav links 15px/550 near-black, body #15171a, underlined links.
   Links are green here rather than Ghost's maroon (client decision). */
header {
  --header-link-color: #15171a;
  --header-link-color-hover: #5b6915;
}
header a.board-header-link {
  font-size: 15px;
  font-weight: 550;
}
body {
  color: #15171a;
}
.rich-text,
.rich-text p,
.rich-text li {
  color: #15171a;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;             /* Ghost .gh-content */
}
.rich-text a {
  color: #5b6915;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* ---- 9. Footer: white page, pale green link box, green links ----
   Ghost's footer is a cream box of link columns on the white page, with
   Inter bold headings and semibold links. The board's footer is one
   full-width cream block; the grid of columns becomes the box instead. */
footer {
  --footer-background-color: #ffffff;
  --footer-link-color: #5b6915;
  --footer-link-color-hover: #4a5511;
  --footer-muted-text-color: #15171a;
  border-top-color: transparent !important;
  padding-left: max(4vmin, 20px) !important;   /* Ghost page gutters, so the */
  padding-right: max(4vmin, 20px) !important;  /* box lines up with the band */
}
footer > .max-w-5xl {
  max-width: 1320px;
}
footer .max-w-5xl > [class~="md:grid"] {
  background: #e9eed0;                 /* same pale green as the filter tray */
  border-radius: 6px;
  padding: 2.5rem 2.75rem;
}
footer h3[class] {
  --footer-link-color: #15171a;        /* headings stay dark, not green */
  font-family: inherit;                /* Inter, not Georgia */
  font-weight: 700;
  font-size: 1.1rem;
  color: #15171a;
}
footer a[class*="footer-link-color"],
footer button[class*="footer-link-color"] {   /* "Cookie settings" is a button */
  font-weight: 600;
  font-size: 15px;
}

/* ---- 10. Intro section above the listing ----
   A Jobboardly rich-text page section (title + paragraphs with links)
   sitting above the board. Client request (2026-10-29): set like the main
   site's tags page (custom-tags.hbs), whose title and body run the full
   1120px column: 72px from the band to the title, Ghost's fluid article
   title (34px to 46px) in green, 32px to the body, Inter 17px/1.6 body with
   28px between paragraphs, green links. Jobboardly separates the
   paragraphs with <br> tags and empty <p>s, which are hidden. Selected by
   its structure, not its #section-NNNNN id, which changes if the section
   is recreated. */
main section:has(> .max-w-7xl > .max-w-prose > .prose) {
  padding-top: 72px !important;
  padding-bottom: 0 !important;
}
main section .max-w-prose:has(> .prose) {
  max-width: none;                     /* the whole column, as on the tags page */
}
main section .max-w-prose > .prose {
  font-size: 17px !important;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #15171a;
}
main section .max-w-prose > .prose h1 {
  font-family: Georgia, Gelasio, "Times New Roman", Times, serif;
  font-size: clamp(34px, 28.5px + 1.36vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: #5b6915;
  margin: 0 0 32px;
}
main section .max-w-prose > .prose p {
  margin: 0;
  color: #15171a;
}
main section .max-w-prose > .prose p:not(:empty) ~ p:not(:empty) {
  margin-top: 28px;                    /* Ghost .gh-content > * + * */
}
main section .max-w-prose > .prose br,
main section .max-w-prose > .prose p:empty {
  display: none;                       /* the editor's blank spacers */
}
main section .max-w-prose > .prose a {
  color: #5b6915;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
main section .max-w-prose > .prose a:hover {
  color: #4a5511;
}

/* ---- 11. Pricing page ----
   "View All Plans" and other text links that Jobboardly colours with the
   lime primary token are hard to read; use the dark jobs green. The
   outlined "Post a Job" links on the plan cards become solid pill buttons
   like every other button on the board. */
/* "Simple, Transparent Pricing" is the page title, but it is an h2 with an
   inline font-size variable (which beats the h2 rule in section 6), so the
   variable is redefined to Ghost's article-title size. */
main h2[style*="--s-title-style-font-size"] {
  --s-title-style-font-size: clamp(34px, 28.5px + 1.36vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
a[style*="color: var(--token-colors-primary"] {
  color: #5b6915 !important;
}
a[style*="color: var(--token-colors-primary"]:hover {
  color: #4a5511 !important;
}
a.block.w-full[style*="border: 1px solid var(--token-colors-primary"] {
  background: #5b6915 !important;
  color: #ffffff !important;
  border-color: #5b6915 !important;
  border-radius: 9999px !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 0.8em 1.4em;
}
a.block.w-full[style*="border: 1px solid var(--token-colors-primary"]:hover {
  background: #4a5511 !important;
  border-color: #4a5511 !important;
}

/* ---- 12. Content column: the main site's tags page column ----
   Client request (2026-10-29): the body runs the same width as the new tags
   page (custom-tags.hbs), where the title, text and tag list use the
   article canvas's "wide" column: 1120px, centred, inside Ghost's fluid
   --container-gap (clamp(24px, 1.7032rem + 1.9355vw, 48px); Ghost's rem is
   10px, so 17.03px here). The header band and footer box stay at 1320px,
   as they do on the tags page. Jobboardly's page wrappers are narrower and
   vary by page (max-w-6xl on the listing, max-w-7xl on the intro, job and
   pricing pages), so every outer wrapper (the one carrying the px-4 gutter
   classes) is given this column, and the job page's inner 1280px wrapper
   is uncapped so it can fill it. */
:root {
  --ghost-container-gap: clamp(24px, 17.03px + 1.9355vw, 48px);
}
main .max-w-7xl.px-4,
main .max-w-6xl.px-4 {
  max-width: calc(1120px + 2 * var(--ghost-container-gap)) !important;
  padding-left: var(--ghost-container-gap) !important;
  padding-right: var(--ghost-container-gap) !important;
}
main .px-4 > .max-w-7xl {
  max-width: none;
}