@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ══════════════════════════════════════════════════════════════════
   THE JILTED RECRUITER — Additional CSS v7.2
   Full replacement for v6. Select all, delete, paste this.

   NEW IN v7.2:
   · Category, tag and search pages: one background colour throughout,
     no lighter band behind the page title (end of section 3).
   · JR icon shows in the menu bar on those pages again. The theme was
     hiding the site title because "Display site title" is off.

   NEW IN v7:
   · Section 2 rewritten. The theme menu on blog posts, category pages
     and search now matches the menu bar on the main pages (JR icon,
     same labels and size, search + Client Portal icons, gold underline
     on the current item). The old centered dotted menu is gone.
   · Section 2b (old Blog dropdown) folded into section 2.
   · Phone nav in section 13 removed: the menu stays visible and wraps,
     same as on the main pages, instead of hiding behind a MENU button.
   · The pasted-on-the-end menu block from this afternoon is now
     section 2, so it is not in the file twice.

   Everything else is unchanged from v6, including the Jetpack related
   posts fix (section 5f) and the form field rules (section 14).
   ══════════════════════════════════════════════════════════════════ */

:root {
  --jr-navy:     #010D13;   /* page background            */
  --jr-surface:  #0A1A22;   /* quotes, nav bar, subscribe */
  --jr-card:     #0E1B22;   /* raised related-post cards  */
  --jr-cream:    #F1DEC9;   /* headlines, strong text     */
  --jr-body:     rgba(241,222,201,.78);
  --jr-dim:      rgba(241,222,201,.42);
  --jr-gold:     #DE9230;
  --jr-gold-lit: #E8A94F;   /* hover only                 */
  --jr-teal:     #5FA6AE;   /* lifted: brand teal too dark on navy */
  --jr-coral:    #E4493A;   /* red accent — rules, hairlines */
  --jr-teal-line: rgba(95,166,174,.55);
  --jr-hair:     rgba(222,146,48,.20);
  --jr-field:    rgba(241,222,201,.35);  /* form field borders */
  --jr-sans:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --jr-display:  'Bebas Neue', 'Arial Narrow', sans-serif;

  --jr-related-max: 1800px;
  --jr-related-gutter: 2rem;
}

/* ── 1. PAGE SHELL ────────────────────────────────────────────── */
html, body,
.site, .site-content, #page, #content, #primary, main,
.wp-site-blocks {
  background-color: var(--jr-navy) !important;
}
body {
  font-family: var(--jr-sans) !important;
  color: var(--jr-body) !important;
  line-height: 1.75 !important;
}

a:focus-visible { outline: 2px solid var(--jr-gold) !important; outline-offset: 3px !important; }

/* NOTE: overflow-x lives in section 13, set to clip. */

/* ── 2. HEADER + NAV (theme header: blog posts, categories, search) ──
   The six main pages carry their own menu bar (a synced pattern) and
   hide this theme header. Everywhere else, the rules below restyle the
   theme header to match that bar exactly: JR icon left, menu next to it,
   search + Client Portal icons right, navy bar, gold underline on the
   current item. Theme markup: header#masthead > .custom-header,
   .site-branding, nav#site-navigation > ul#top-menu.
   Menu item ids used: 4090 Home, 3105 Blog, 4147 Search, 3945 Client Portal.
   ──────────────────────────────────────────────────────────────── */
/* 1. Hide the banner image and tagline; keep the bar navy */
body:not(:has(.jr-pagenav)) :is(.header-image, .custom-header, #wp-custom-header, .site-description) { display: none !important; }

body:not(:has(.jr-pagenav)) #masthead {
  position: relative !important; left: 50% !important; transform: translateX(-50%) !important; width: 100vw !important;
  background: #010D13 !important;
  border-bottom: 1px solid rgba(241,222,201,0.14) !important;
  display: flex !important; align-items: center !important; gap: 28px !important;
  max-width: none !important; box-sizing: border-box !important;
  padding: 0 max(32px, calc((100vw - 1320px) / 2)) !important; margin: 0 !important;
  min-height: 70px !important; text-align: left !important;
}

/* 2. JR icon in place of the site title */
body:not(:has(.jr-pagenav)) #masthead .site-branding {
  display: block !important; visibility: visible !important; flex: 0 0 auto !important; background: transparent !important; margin: 0 !important; padding: 6.4px 0 !important; text-align: left !important;
}
body:not(:has(.jr-pagenav)) #masthead :is(.custom-logo-link, .site-logo, .jetpack-social-navigation, .social-navigation) { display: none !important; }
body:not(:has(.jr-pagenav)) #masthead .site-title {
  display: block !important; visibility: visible !important;
  position: static !important; clip: auto !important; clip-path: none !important;
  width: auto !important; height: auto !important; overflow: visible !important;
}
body:not(:has(.jr-pagenav)) #masthead .site-title { margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
body:not(:has(.jr-pagenav)) #masthead .site-title a {
  position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important;
  width: 64px !important; height: 56px !important;
  font-size: 0 !important; color: transparent !important; text-decoration: none !important; border: 0 !important;
}
body:not(:has(.jr-pagenav)) #masthead .site-title a::before {
  content: "JR"; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 32px; letter-spacing: 1px; line-height: 1;
  color: #F1DEC9; position: relative; top: 0;
}
body:not(:has(.jr-pagenav)) #masthead .site-title a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 26 168 148'%3E%3Cpath d='M54 56 C 82 34, 140 34, 162 60 C 182 86, 160 140, 102 146 C 48 150, 24 118, 34 86 C 40 68, 58 54, 84 48' fill='none' stroke='%23E4493A' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M64 164 C 88 158, 116 168, 138 160' fill='none' stroke='%23DE9230' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 3. The menu */
body:not(:has(.jr-pagenav)) #site-navigation {
  flex: 1 1 auto !important; background: transparent !important; border: 0 !important;
  margin: 0 !important; padding: 0 !important; width: auto !important; max-width: none !important;
}
body:not(:has(.jr-pagenav)) #site-navigation > div,
body:not(:has(.jr-pagenav)) #site-navigation ul.menu,
body:not(:has(.jr-pagenav)) #top-menu {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 5.6px !important;
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  list-style: none !important; background: transparent !important; text-align: left !important; justify-content: flex-start !important;
}
body:not(:has(.jr-pagenav)) #top-menu > li {
  position: relative !important; display: flex !important; align-items: center !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; background: none !important;
}
body:not(:has(.jr-pagenav)) #top-menu > li::before,
body:not(:has(.jr-pagenav)) #top-menu > li::after { content: none !important; display: none !important; margin: 0 !important; }
body:not(:has(.jr-pagenav)) #site-navigation a { opacity: 1 !important; }
body:not(:has(.jr-pagenav)) #top-menu > li > a {
  display: flex !important; align-items: center !important; min-height: 70px !important;
  padding: 10px 9.6px 0 !important; margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important; font-size: 14.1px !important; font-weight: 700 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; line-height: 1.2 !important;
  color: #F1DEC9 !important; background: none !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important;
}
body:not(:has(.jr-pagenav)) #top-menu > li > a:hover,
body:not(:has(.jr-pagenav)) #top-menu > li > a:focus-visible { color: #DE9230 !important; }

/* Order to match the main pages: Home first, icons last on the right */
body:not(:has(.jr-pagenav)) #top-menu > li#menu-item-4090 { order: -1 !important; }
body:not(:has(.jr-pagenav)) #top-menu > li:is(.jr-search, #menu-item-4147) { order: 50 !important; margin-left: auto !important; }
body:not(:has(.jr-pagenav)) #top-menu > li:is(.jr-portal, #menu-item-3945) { order: 51 !important; }

/* Current page / section in gold with an underline */
body:not(:has(.jr-pagenav)) #top-menu > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_item) > a {
  color: #DE9230 !important;
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 7px !important;
}
/* On a single blog post, mark "Blog" as the current section */
body.single-post:not(:has(.jr-pagenav)) #top-menu > li#menu-item-3105 > a {
  color: #DE9230 !important;
  text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 7px !important;
}

/* Blog dropdown arrow + dropdown panel */
body:not(:has(.jr-pagenav)) #top-menu > li.menu-item-has-children > a::after {
  content: "" !important; font-family: inherit !important; font-size: 0 !important; padding: 0 !important; display: inline-block !important; width: 6px; height: 6px; margin-left: 8px; margin-top: -4px;
  border-right: 1.5px solid #5FA6AE; border-bottom: 1.5px solid #5FA6AE; transform: rotate(45deg);
  background: none !important; position: static !important;
}
body:not(:has(.jr-pagenav)) #top-menu .sub-menu {
  position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important;
  min-width: 260px !important; background: #010D13 !important; display: none !important; border: 1px solid rgba(222,146,48,0.3) !important;
  border-top: 2px solid #DE9230 !important; padding: 8px 0 !important; margin: 0 !important;
  list-style: none !important; z-index: 110 !important; box-shadow: none !important; text-align: left !important;
}
body:not(:has(.jr-pagenav)) #top-menu .sub-menu li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; width: 100% !important; }
body:not(:has(.jr-pagenav)) #top-menu .sub-menu a {
  display: block !important; padding: 10.4px 20px !important; white-space: nowrap !important;
  font-family: 'DM Sans', sans-serif !important; font-size: 13.1px !important; font-weight: 700 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: #F1DEC9 !important; background: none !important; border: 0 !important; text-decoration: none !important;
}
body:not(:has(.jr-pagenav)) #top-menu .sub-menu a:hover { color: #DE9230 !important; }

/* Search + Client Portal as icons */
body:not(:has(.jr-pagenav)) #top-menu > li:is(.jr-search, .jr-portal) > a {
  width: 44px !important; min-height: 44px !important; padding: 0 !important; justify-content: center !important;
  font-size: 0 !important; color: transparent !important; text-decoration: none !important;
}
body:not(:has(.jr-pagenav)) #top-menu > li:is(.jr-search, .jr-portal) > a::before {
  content: "" !important; display: block !important; width: 24px; height: 24px; background-color: #F1DEC9;
  -webkit-mask: no-repeat center / contain var(--jr-icon); mask: no-repeat center / contain var(--jr-icon);
}
body:not(:has(.jr-pagenav)) #top-menu > li:is(.jr-search, .jr-portal) > a:hover::before { background-color: #DE9230; }
body:not(:has(.jr-pagenav)) #top-menu > li.jr-search > a {
  --jr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
body:not(:has(.jr-pagenav)) #top-menu > li.jr-portal > a {
  --jr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
}

/* Menu toggle never needed: the menu is always visible */
body:not(:has(.jr-pagenav)) #site-navigation .menu-toggle { display: none !important; }
@media (min-width: 1081px) {
  body:not(:has(.jr-pagenav)) #top-menu > li:hover > .sub-menu,
  body:not(:has(.jr-pagenav)) #top-menu > li:focus-within > .sub-menu,
  body:not(:has(.jr-pagenav)) #top-menu > li.focus > .sub-menu { display: block !important; left: 50% !important; }
}

/* Tablet and phone: icon + toggle on top, menu below, centered */
@media (max-width: 1080px) {
  body:not(:has(.jr-pagenav)) #masthead { flex-wrap: wrap !important; gap: 0 16px !important; padding: 0 16px !important; }
  body:not(:has(.jr-pagenav)) #site-navigation { flex-basis: 100% !important; }
  body:not(:has(.jr-pagenav)) #top-menu { justify-content: center !important; border-top: 1px solid rgba(241,222,201,0.1) !important; }
  body:not(:has(.jr-pagenav)) #top-menu > li > a { min-height: 46px !important; padding: 6px 8px 0 !important; font-size: 12.5px !important; }
  body:not(:has(.jr-pagenav)) #top-menu > li:is(.jr-search, .jr-portal) { margin-left: 0 !important; }
  body:not(:has(.jr-pagenav)) #top-menu .sub-menu,
  body:not(:has(.jr-pagenav)) #top-menu > li.menu-item-has-children > a::after { display: none !important; }
}

/* ── 3. BLOG INDEX + ARCHIVES ─────────────────────────────────── */
.blog #secondary, .archive #secondary,
.blog .sidebar, .archive .sidebar,
.blog .widget-area, .archive .widget-area { display: none !important; }

.blog #primary, .archive #primary,
.blog .content-area, .archive .content-area,
.blog .site-main, .archive .site-main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* Blog/archive hero: full-bleed band built from the theme's own title */
.blog .page-title, .archive .page-title {
  font-family: var(--jr-display) !important;
  font-size: clamp(2.8rem, 6.5vw, 5rem) !important;
  line-height: .95 !important;
  letter-spacing: .03em !important;
  color: var(--jr-cream) !important;
  text-align: left !important;
  text-transform: none !important;
  border-bottom: none !important;

  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: 3rem max(2rem, calc(50vw - 480px)) 0 !important;
  background: var(--jr-navy) !important;   /* v7.1: no lighter band behind the title */
}

/* The standfirst under "Blog". NOTE: injected by CSS, so invisible to
   search engines and screen readers. Better long term as real text. */
.blog .page-title::after {
  content: "Hiring truth for the displaced professional. How ATS systems, interview panels, and salary screens actually work \2014 written by someone who ran them for 15+ years, then job searched against them.";
  display: block;
  max-width: 640px;
  margin-top: 1.5rem;
  padding-bottom: 4rem;
  border-bottom: 3px solid var(--jr-gold);
  font-family: var(--jr-sans);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  color: var(--jr-body);
  text-transform: none;
}

/* Description text on a category or tag archive, if one is set */
.category .archive-description, .tag .archive-description,
.category .taxonomy-description, .tag .taxonomy-description {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  font-style: italic !important;
  color: var(--jr-body) !important;
  line-height: 1.75 !important;
  max-width: 620px !important;
  margin-top: .75rem !important;
}

.blog article, .archive article, .category article, .tag article {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--jr-hair) !important;
  padding: 3rem 0 !important;
  margin: 0 auto !important;
  max-width: 820px !important;
}

/* Featured image on index and archive views. Whole 1200x630 card,
   not a slice — a fixed height cropped the wordmark. */
.blog .post-thumbnail img, .archive .post-thumbnail img,
.category .post-thumbnail img {
  width: 100% !important;
  display: block !important;
  margin-bottom: 1.25rem !important;
  border-top: 3px solid var(--jr-gold) !important;
  height: auto !important;
  aspect-ratio: 1200 / 630 !important;
  object-fit: contain !important;
}

.blog .entry-title, .archive .entry-title,
.category .entry-title, .tag .entry-title {
  font-family: var(--jr-display) !important;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: .03em !important;
  margin: .25rem 0 .75rem !important;
}
.blog .entry-title a, .archive .entry-title a,
.category .entry-title a, .tag .entry-title a {
  color: var(--jr-cream) !important;
  text-decoration: none !important;
}
.blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--jr-gold) !important; }

.blog .entry-summary p, .archive .entry-summary p,
.category .entry-summary p, .tag .entry-summary p {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  color: var(--jr-body) !important;
  line-height: 1.8 !important;
  max-width: 66ch !important;
  margin-bottom: 1.25rem !important;
}

.blog .more-link, .archive .more-link,
.category .more-link, .tag .more-link {
  display: inline-block !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--jr-gold) !important;
  text-decoration: none !important;
  border-bottom: 2px solid var(--jr-hair) !important;
  padding-bottom: 2px !important;
}
.blog .more-link:hover, .archive .more-link:hover {
  color: var(--jr-gold-lit) !important;
  border-color: var(--jr-gold-lit) !important;
}

.blog .comments-link, .archive .comments-link,
.category .comments-link, .tag .comments-link { display: none !important; }

/* v7.2: One background colour, top to bottom, on category, tag, search
   and blog-index pages. Nothing behind the page title is lighter. */
body:is(.archive, .search, .blog):not(:has(.jr-pagenav)) :is(#page, #content, .site-content, .content-wrapper, #primary, .content-area, .site-main, main, .page-header, .page-title, .taxonomy-description, .archive-description, article, .hentry, .entry-header, .entry-body, .post-thumbnail) {
  background: #010D13 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ── 4. CATEGORY / TAG LABELS ─────────────────────────────────── */
.blog .cat-links a, .archive .cat-links a,
.category .cat-links a, .tag .cat-links a {
  border: 1px solid var(--jr-teal-line) !important;
  padding: .2rem .55rem !important;
}

.cat-links, .cat-links a {
  font-family: var(--jr-sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--jr-teal) !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-bottom: .5rem !important;
}
.cat-links a:hover { color: var(--jr-gold-lit) !important; }

.entry-meta, .posted-on, .byline, .entry-meta a {
  font-family: var(--jr-sans) !important;
  font-size: .75rem !important;
  color: var(--jr-dim) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

.tags-links, .tags-links a {
  font-size: .7rem !important;
  color: var(--jr-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  text-decoration: none !important;
}
.tags-links a:hover { color: var(--jr-teal) !important; }

/* ── 5. SINGLE POST ───────────────────────────────────────────── */
.single .post-thumbnail img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  display: block !important;
  border-top: 4px solid var(--jr-gold) !important;
  margin: 0 !important;
}

/* NOTE: no universal `*` selector here — that is what was
   overriding every style on anything pasted into a post. */
.single .entry-content {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 0 3rem !important;
  font-family: var(--jr-sans) !important;
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
}

.single .entry-content p:not([style]) {
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
  margin-bottom: 1.5rem !important;
}

.single .entry-content h2:not([style]) {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  letter-spacing: .05em !important;
  line-height: 1.1 !important;
  color: var(--jr-cream) !important;
  margin: 2.75rem 0 1rem !important;
  border-left: 5px solid var(--jr-gold) !important;
  padding-left: 1rem !important;
}

.single .entry-content h3:not([style]) {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--jr-gold) !important;
  margin: 2rem 0 .75rem !important;
}

.single .entry-content strong:not([style]),
.single .entry-content b:not([style]) { color: var(--jr-cream) !important; font-weight: 700 !important; }

.single .entry-content em:not([style]),
.single .entry-content i:not([style]) { color: var(--jr-teal) !important; }

.single .entry-content a:not([style]) {
  color: var(--jr-gold-lit) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
.single .entry-content a:hover { color: var(--jr-teal) !important; }

.single .entry-content ul:not([style]),
.single .entry-content ol:not([style]) {
  color: var(--jr-body) !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.85 !important;
}
.single .entry-content li:not([style]) { margin-bottom: .5rem !important; }
.single .entry-content ul li::marker { color: var(--jr-gold) !important; }
.single .entry-content ol li::marker { color: var(--jr-teal) !important; }

/* Quote block */
.single .entry-content blockquote:not([style]),
.single .entry-content .wp-block-quote:not([style]) {
  border-left: 4px solid var(--jr-gold) !important;
  background: var(--jr-surface) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 2.25rem 0 !important;
  border-radius: 0 !important;
}
.single .entry-content blockquote p:not([style]) {
  color: var(--jr-cream) !important;
  font-style: normal !important;
  margin: 0 0 .75rem !important;
}
.single .entry-content blockquote p:last-child { margin-bottom: 0 !important; }
.single .entry-content blockquote:not([style]) cite,
.page .entry-content blockquote:not([style]) cite {
  color: var(--jr-teal) !important;
  font-style: normal !important;
}

/* Section break — coral, short. Sparing by design: at #E4493A the
   contrast on navy is too low to carry body text. */
.single .entry-content hr:not([style]),
.page .entry-content hr:not([style]) {
  border: none !important;
  border-top: 3px solid var(--jr-coral) !important;
  width: 64px !important;
  margin: 2.5rem 0 !important;
}

/* Buttons — CTA at the end of each post */
.single .entry-content .wp-block-button__link {
  background: var(--jr-gold) !important;
  color: var(--jr-navy) !important;
  font-family: var(--jr-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-size: .85rem !important;
  border-radius: 0 !important;
  padding: .85rem 1.5rem !important;
  text-decoration: none !important;
}
.single .entry-content .is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--jr-cream) !important;
  border: 2px solid var(--jr-hair) !important;
}

/* ── 5b. LEAVE HAND-STYLED HTML ALONE ─────────────────────────────
   Every rule in section 5 uses :not([style]). Normal WordPress blocks
   get the styling above; any element carrying its own inline style
   attribute is skipped entirely. That is what lets a pasted Custom
   HTML block keep its own colors instead of being flattened.
   ──────────────────────────────────────────────────────────────── */

/* ── 5c. THEME HEADER, SUPPRESSED ─────────────────────────────────
   Posts carry their own header: gold category chip, headline,
   standfirst, byline. The theme ALSO prints an .entry-header, which
   would give you two of each.

   KEEP FILLING THE TITLE FIELD. It is hidden here, not deleted, and
   it still drives the URL, the blog index card, the browser tab, and
   the search result. Only its on-page printing is suppressed.
   ──────────────────────────────────────────────────────────────── */

.single .entry-header { display: none !important; }

.single .site-main, .single .content-area,
.single #primary, .single .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* WordPress leaves empty paragraphs behind after a paste. Invisible,
   but each still occupies a line-height. */
.single .entry-content p:empty,
.single .entry-content > br:first-child { display: none !important; }

/* ── 5d. STATIC PAGES ─────────────────────────────────────────────
   Mirrors the post-body rules onto .page.
   If some page needs the theme title back, swap the selector below
   for a page-specific one — body.page-id-123 .entry-header — which
   you can read off the edit URL for that page.
   ──────────────────────────────────────────────────────────────── */

.page .entry-header { display: none !important; }

.page .site-main, .page .content-area,
.page #primary, .page .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page .entry-content {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 0 3rem !important;
  font-family: var(--jr-sans) !important;
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
}

.page .entry-content p:not([style]) {
  font-size: 1.06rem !important;
  line-height: 1.85 !important;
  color: var(--jr-body) !important;
  margin-bottom: 1.5rem !important;
}

.page .entry-content h1:not([style]),
.page .entry-content h2:not([style]) {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  letter-spacing: .05em !important;
  line-height: 1.1 !important;
  color: var(--jr-cream) !important;
  margin: 2.75rem 0 1rem !important;
  border-left: 5px solid var(--jr-gold) !important;
  padding-left: 1rem !important;
}

.page .entry-content h3:not([style]) {
  font-family: var(--jr-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--jr-gold) !important;
  margin: 2rem 0 .75rem !important;
  border-left: 3px solid var(--jr-teal) !important;
  padding-left: .75rem !important;
}

.page .entry-content strong:not([style]) { color: var(--jr-cream) !important; font-weight: 700 !important; }
.page .entry-content em:not([style])     { color: var(--jr-teal) !important; }

.page .entry-content a:not([style]) {
  color: var(--jr-gold-lit) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.page .entry-content ul:not([style]),
.page .entry-content ol:not([style]) {
  color: var(--jr-body) !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.page .entry-content ul li::marker { color: var(--jr-gold) !important; }
.page .entry-content ol li::marker { color: var(--jr-teal) !important; }

.page .entry-content blockquote:not([style]) {
  border-left: 4px solid var(--jr-gold) !important;
  background: var(--jr-surface) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 2.25rem 0 !important;
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   5f. JETPACK SHARING — READ THIS BEFORE EDITING

   This block is why related posts vanished on nine of ten posts.

   Jetpack outputs a single wrapper containing BOTH the share buttons
   and the related posts:

     <div id="jp-post-flair" class="sharedaddy sd-sharing-enabled">
       <div class="sharedaddy sd-sharing-enabled">…buttons…</div>
       <div id="jp-relatedposts">…related posts…</div>
     </div>

   The wrapper matches #jp-post-flair, .sharedaddy AND
   .sd-sharing-enabled. Hiding any of those hides the related posts
   sitting inside it.

   So: hide the INNER sharing UI only, then force the wrapper and the
   related posts explicitly back to visible.

   DO NOT add .sharedaddy, .sd-sharing-enabled or #jp-post-flair to a
   display:none rule anywhere in this file.

   The visible share row on your posts is the WPCode jr-share block,
   not this. Hiding Jetpack's buttons costs you nothing.
   ══════════════════════════════════════════════════════════════════ */

.sd-content,
.sd-block,
.sd-title,
.sd-sharing,
.sharedaddy h3.sd-title,
.post-likes-widget-placeholder,
.post-likes-widget,
.sd-like {
  display: none !important;
}

#jp-post-flair,
#jp-relatedposts,
.jp-relatedposts {
  display: block !important;
}

/* ── 6. PREVIOUS / NEXT POST NAVIGATION ───────────────────────────
   Dara's markup:
     <nav class="navigation post-navigation">
       <div class="nav-links">
         <div class="nav-previous">
           <a><span class="title">Previous post</span>Post headline</a>

   The label is REAL TEXT inside the link. It does not need
   generating — only styling, and display:block so the headline that
   follows it drops onto its own line.

   DO NOT ADD A ::before HERE. v4 generated "Previous post" with one,
   on top of the span Dara already prints. That was the doubled label.
   ──────────────────────────────────────────────────────────────── */

.single .post-navigation,
.single .navigation.post-navigation {
  max-width: 780px !important;
  margin: 3rem auto !important;
  padding: 1.75rem 0 !important;
  border-top: 1px solid var(--jr-hair) !important;
  border-bottom: 1px solid var(--jr-hair) !important;
  background: transparent !important;
}

.single .post-navigation .nav-links {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  border: none !important;
  padding: 0 !important;
}

.single .nav-links .nav-previous,
.single .nav-links .nav-next {
  flex: 1 1 40% !important;
  min-width: 220px !important;
}
.single .nav-links .nav-next { text-align: right !important; }

/* Belt and braces: kill any generated content inside the nav, so a
   stray ::before pasted in later cannot bring the duplicate back. */
.single .post-navigation *::before,
.single .post-navigation *::after { content: none !important; }

/* Dara's own label */
.single .post-navigation .nav-links .title {
  display: block !important;
  font-family: var(--jr-sans) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--jr-dim) !important;
  margin-bottom: .4rem !important;
}

/* The link itself — the post's headline, in the display face */
.single .nav-links .nav-previous a,
.single .nav-links .nav-next a {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: 1.15rem !important;
  line-height: 1.2 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  color: var(--jr-cream) !important;
  text-decoration: none !important;
  display: inline-block !important;
}
.single .nav-links .nav-previous a:hover,
.single .nav-links .nav-next a:hover { color: var(--jr-gold) !important; }

@media (max-width: 600px) {
  .single .post-navigation .nav-links { flex-direction: column !important; }
  .single .nav-links .nav-next { text-align: left !important; }
}

/* ── 7. COMMENTS ──────────────────────────────────────────────── */
.single #comments, .single .comments-area {
  border-top: 1px solid var(--jr-hair) !important;
  padding-top: 2rem !important;
  background: transparent !important;
}
.single .comments-title, .single #reply-title {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: 1.6rem !important;
  letter-spacing: .06em !important;
  color: var(--jr-cream) !important;
}

/* Comments are closed on every post by design. No need to announce it. */
.single .no-comments { display: none !important; }

/* ── 8. JETPACK: RELATED POSTS + SUBSCRIBE ────────────────────── */
.jp-relatedposts, #jp-relatedposts {
  background: var(--jr-navy) !important;
  border-top: 1px solid var(--jr-hair) !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
}

/* FULL-BLEED ON A SINGLE POST. Jetpack injects this at the end of
   .entry-content, capped at 780px. These margins pull it back out. */
.single .jp-relatedposts,
.single #jp-relatedposts {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 3rem !important;
  padding: 3rem var(--jr-related-gutter) 3.5rem !important;
  background: var(--jr-navy) !important;
  border-top: 3px solid var(--jr-gold) !important;
  box-sizing: border-box !important;
}

.single .jp-relatedposts-headline,
.single .jp-relatedposts-items,
.single .jp-relatedposts-items-visual {
  max-width: var(--jr-related-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.single .jp-relatedposts-headline { margin-bottom: 1.5rem !important; }

/* Jetpack wraps "Related" in <em>. Without the .entry-content prefix
   on the em rule in section 5, that rule would paint this teal. */
.jp-relatedposts-headline,
.jp-relatedposts-headline em,
.single .entry-content .jp-relatedposts-headline,
.single .entry-content .jp-relatedposts-headline em {
  font-family: var(--jr-display) !important;
  font-size: 1.4rem !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
  color: var(--jr-cream) !important;
  margin-bottom: 1.25rem !important;
}

.jp-relatedposts-items,
.jp-relatedposts-items-visual {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.75rem !important;
  margin: 0 !important;
}

/* Raised cards. Separation comes from the value gap against the navy
   band, not from a border. Three stacked shadows rather than one — a
   single large blur reads as a smudge on near-black. The 1px cream
   line on the top edge is what actually sells the lift. */
.jp-relatedposts-items .jp-relatedposts-post,
.jp-relatedposts-items-visual .jp-relatedposts-post {
  background: var(--jr-card) !important;
  border: none !important;
  border-top: 1px solid rgba(241,222,201,.10) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 8px 16px rgba(0,0,0,.55),
    0 20px 40px rgba(0,0,0,.45) !important;
  padding: 0 0 1.25rem !important;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  opacity: 1 !important;
}

.jp-relatedposts-items .jp-relatedposts-post-img,
.jp-relatedposts-post-aoverlay {
  display: block !important;
  width: 100% !important;
  margin: 0 0 .85rem !important;
}
.jp-relatedposts-items .jp-relatedposts-post-img img,
.jp-relatedposts-post-img img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

/* On a single post the cards are wide enough to show the featured
   image whole. The 150px crop above chopped the wordmark off. */
.single .jp-relatedposts-items .jp-relatedposts-post-img img,
.single .jp-relatedposts-post-img img {
  height: auto !important;
  aspect-ratio: 1200 / 630 !important;
  object-fit: contain !important;
}

.jp-relatedposts-items .jp-relatedposts-post-title,
.jp-relatedposts-items .jp-relatedposts-post-date,
.jp-relatedposts-items .jp-relatedposts-post-context,
.jp-relatedposts-items .jp-relatedposts-post-excerpt {
  padding: 0 1.25rem !important;
  margin: 0 0 .5rem !important;
}

/* Card titles are quiet — the headlines inside the featured images
   are already doing the shouting. */
.jp-relatedposts-post-title a,
.single .jp-relatedposts-post-title a {
  font-family: var(--jr-sans) !important;
  font-weight: 500 !important;
  font-size: 1.02rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--jr-cream) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  line-height: 1.45 !important;
}
.jp-relatedposts-post-title a:hover {
  color: var(--jr-gold) !important;
  text-decoration: none !important;
}

.single .jp-relatedposts-items .jp-relatedposts-post-title {
  padding: .35rem 1.25rem .75rem !important;
}
.single .jp-relatedposts-post-title a { font-size: 1.08rem !important; }

.jp-relatedposts-post-date, .jp-relatedposts-post-context {
  font-size: .68rem !important;
  color: var(--jr-dim) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.jp-relatedposts-post-excerpt {
  font-size: .85rem !important;
  color: var(--jr-body) !important;
  line-height: 1.7 !important;
}

.jetpack_subscription_widget, .wp-block-jetpack-subscriptions {
  background: var(--jr-surface) !important;
  border-top: 3px solid var(--jr-gold) !important;
  padding: 2rem !important;
  margin-top: 2rem !important;
}
.jetpack_subscription_widget h2,
.wp-block-jetpack-subscriptions h2 {
  font-family: var(--jr-display) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: .08em !important;
  color: var(--jr-cream) !important;
}
.jetpack_subscription_widget p,
.wp-block-jetpack-subscriptions p {
  font-size: .92rem !important;
  color: var(--jr-body) !important;
}
.jetpack_subscription_widget input[type="email"],
.wp-block-jetpack-subscriptions input[type="email"] {
  background: var(--jr-navy) !important;
  border: 1px solid var(--jr-hair) !important;
  color: var(--jr-cream) !important;
  font-family: var(--jr-sans) !important;
  padding: .6rem 1rem !important;
}
.jetpack_subscription_widget input[type="submit"],
.wp-block-jetpack-subscriptions input[type="submit"] {
  background: var(--jr-gold) !important;
  border: none !important;
  color: var(--jr-navy) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .6rem 1.5rem !important;
  cursor: pointer !important;
}
.jetpack_subscription_widget input[type="submit"]:hover { background: var(--jr-gold-lit) !important; }

/* ── 9. FOOTER ────────────────────────────────────────────────── */
.site-footer, #colophon {
  background-color: var(--jr-navy) !important;
  border-top: 1px solid var(--jr-hair) !important;
  padding: 2rem !important;
  text-align: center !important;
}
.site-footer .site-info, .site-footer p,
#colophon .site-info, #colophon p {
  font-size: .78rem !important;
  color: var(--jr-dim) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.site-footer a, #colophon a { color: var(--jr-gold) !important; text-decoration: none !important; }
.site-footer a:hover, #colophon a:hover { color: var(--jr-gold-lit) !important; }

/* ── 9b. FOOTER MENU ──────────────────────────────────────────────
   Assign a menu to the footer location and it picks this up.
   ──────────────────────────────────────────────────────────────── */
.site-footer nav, #colophon nav,
.footer-navigation, .site-footer .menu-footer-container {
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  border: none !important;
}

.site-footer nav ul, #colophon nav ul,
.site-footer .menu, #colophon .menu,
.footer-navigation ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 0 1.25rem !important;
  max-width: 820px !important;
  border-bottom: 1px solid var(--jr-hair) !important;
}

.site-footer nav ul li, #colophon nav ul li,
.site-footer .menu li, #colophon .menu li,
.footer-navigation ul li {
  display: inline-flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
}

.site-footer nav ul li + li::before,
#colophon nav ul li + li::before,
.site-footer .menu li + li::before,
.footer-navigation ul li + li::before {
  content: '\00B7' !important;
  color: var(--jr-dim) !important;
  padding: 0 .35rem !important;
  display: inline !important;
  font-size: 1rem !important;
}

.site-footer nav a, #colophon nav a,
.site-footer .menu a, #colophon .menu a,
.footer-navigation a {
  font-family: var(--jr-sans) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--jr-body) !important;
  text-decoration: none !important;
  padding: .5rem .7rem !important;
  white-space: nowrap !important;
}

.site-footer nav a:hover, #colophon nav a:hover,
.site-footer .menu a:hover, #colophon .menu a:hover { color: var(--jr-gold) !important; }

.site-footer .site-info, #colophon .site-info { padding-top: .25rem !important; }

@media (max-width: 600px) {
  .site-footer nav a, #colophon nav a,
  .site-footer .menu a, #colophon .menu a {
    font-size: .68rem !important;
    padding: .4rem .45rem !important;
    letter-spacing: .1em !important;
  }
  .site-footer nav ul li + li::before,
  .site-footer .menu li + li::before { padding: 0 .15rem !important; }
}
.site-info a[href*="wordpress.com"],
.site-info a[href*="wordpress.org"] { display: none !important; }

/* ── 10. PAGINATION ───────────────────────────────────────────────
   SCOPED. v4 targeted a bare .nav-links, which also matched the post
   navigation in section 6 and gave it a second border.
   ──────────────────────────────────────────────────────────────── */
.pagination,
.posts-navigation .nav-links,
.pagination .nav-links {
  text-align: center !important;
  padding: 2.5rem 0 !important;
  border-top: 1px solid var(--jr-hair) !important;
}
.page-numbers {
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--jr-body) !important;
  padding: .5rem 1rem !important;
  text-decoration: none !important;
}
.page-numbers.current {
  color: var(--jr-gold) !important;
  border-bottom: 2px solid var(--jr-gold) !important;
}
.page-numbers:hover { color: var(--jr-gold-lit) !important; }

/* ── 11. RESPONSIVE (content only — nav lives in section 2) ────── */
@media (max-width: 768px) {
  .single .entry-content { padding: 0 1.25rem 2.5rem !important; }
  .blog article, .archive article { padding: 2.25rem 1.25rem !important; }

  .single .jp-relatedposts,
  .single #jp-relatedposts { padding: 2.25rem 1.25rem 2.5rem !important; }
  .single .jp-relatedposts-items .jp-relatedposts-post-title {
    padding: .35rem 1rem .75rem !important;
  }
  .single .jp-relatedposts-post-title a { font-size: 1rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 12. FULL-BLEED PAGE SECTION ──────────────────────────────────
   Wrapper id used on the Work With Me 1-1 page.
   ──────────────────────────────────────────────────────────────── */
#jilted-work {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ── 13. MOBILE SAFETY ─────────────────────────────────────────── */

/* overflow-x:clip, unlike hidden, does not create a scroll container,
   so a 100vw child cannot widen the layout viewport. Without this a
   phone renders the desktop layout and no media query fires. */
html, body {
  max-width: 100% !important;
  overflow-x: clip !important;
}

img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto !important;
}

/* The header must stay overflow:visible — the Blog dropdown is
   absolutely positioned below the nav bar, and any clipping ancestor
   cuts it off. The banner is contained on an inner wrapper instead. */
.site-header, #masthead {
  max-width: 100% !important;
  overflow: visible !important;
}
.header-image, .site-header .header-image,
.site-branding, .site-header a[rel="home"] {
  max-width: 100% !important;
  overflow: hidden !important;
  display: block !important;
}
.current-menu-item > a,
.current_page_item > a { color: var(--jr-gold) !important; }

/* ── 14. FORM FIELDS ──────────────────────────────────────────────
   CONSOLIDATED. v4 carried six separate appended blocks here, two of
   which cancelled each other out: one drew a gradient chevron on
   <select>, a later one set background-image:none to remove it.
   Both gone. Jetpack draws its own chevron; we recolor it.
   ──────────────────────────────────────────────────────────────── */

/* Text inputs and textareas — transparent, white text */
.page .entry-content input[type="text"],
.page .entry-content input[type="email"],
.page .entry-content textarea,
.jr-form-zone input[type="text"],
.jr-form-zone input[type="email"],
.jr-form-zone textarea,
.jr-contact input[type="text"],
.jr-contact input[type="email"],
.jr-contact textarea {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--jr-field) !important;
  border-radius: 0 !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-family: var(--jr-sans) !important;
  padding: .85rem 1rem !important;
}

.page .entry-content input:focus,
.page .entry-content textarea:focus,
.page .entry-content select:focus,
.jr-form-zone input:focus,
.jr-form-zone textarea:focus,
.jr-contact input:focus,
.jr-contact textarea:focus,
select:focus,
select:focus-visible {
  border-color: var(--jr-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}

.page .entry-content input::placeholder,
.page .entry-content textarea::placeholder,
.jr-form-zone input::placeholder,
.jr-contact input::placeholder,
.jr-contact textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Submit buttons */
.page .entry-content input[type="submit"],
.page .entry-content button[type="submit"] {
  background: var(--jr-gold) !important;
  border: none !important;
  color: var(--jr-navy) !important;
  font-family: var(--jr-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  padding: .85rem 1.5rem !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Chrome autofill paints its own background over everything */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px var(--jr-navy) inset !important;
  caret-color: #FFFFFF !important;
}

/* Native <select>, where one still appears */
.page .entry-content select,
.jr-form-zone select,
.jr-contact select,
.contact-form select,
.wp-block-jetpack-contact-form select,
select.grunion-field {
  background-color: var(--jr-navy) !important;
  background-image: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  border: 1.5px solid var(--jr-field) !important;
  border-radius: 0 !important;
  padding: .85rem 2.75rem .85rem 1rem !important;
  box-shadow: none !important;
  outline: none !important;
}
.page .entry-content select option,
.jr-contact select option,
.contact-form select option {
  background-color: var(--jr-navy) !important;
  color: #FFFFFF !important;
}

/* ── 14b. JETPACK CUSTOM DROPDOWN ─────────────────────────────────
   Jetpack replaces the native select with its own component: a
   toggle div plus a hidden select. Every rule targeting `select`
   misses it, which is why the white box persisted. The attribute
   selector and :has() catch it whatever the inner classes are called.
   ──────────────────────────────────────────────────────────────── */

[class*="jetpack-field-dropdown"],
.jetpack-field__input {
  background-color: var(--jr-navy) !important;
  color: #FFFFFF !important;
  border-color: var(--jr-field) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.jetpack-field-dropdown__toggle,
.jetpack-field__input,
div:has(> .jetpack-field-dropdown__icon) {
  border: 1.5px solid var(--jr-field) !important;
  font-family: var(--jr-sans) !important;
  font-size: 17px !important;
  padding: .85rem 1rem !important;
}

.jetpack-field-dropdown__toggle:hover,
.jetpack-field-dropdown__toggle:focus,
.jetpack-field-dropdown__toggle:focus-visible,
.jetpack-field-dropdown__toggle[aria-expanded="true"],
.jetpack-field__input:focus {
  border-color: var(--jr-gold) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Jetpack's chevron, recolored to gold */
.jetpack-field-dropdown__icon { color: var(--jr-gold) !important; fill: var(--jr-gold) !important; }
.jetpack-field-dropdown__icon svg,
.jetpack-field-dropdown__icon svg path {
  fill: var(--jr-gold) !important;
  stroke: var(--jr-gold) !important;
}

/* The open list */
.jetpack-field-dropdown__list,
.jetpack-field-dropdown__options,
.jetpack-field-dropdown__popover {
  background: var(--jr-navy) !important;
  border: 1.5px solid var(--jr-field) !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.jetpack-field-dropdown__list li,
.jetpack-field-dropdown__option {
  background: var(--jr-navy) !important;
  color: #FFFFFF !important;
}
.jetpack-field-dropdown__list li:hover,
.jetpack-field-dropdown__option:hover,
.jetpack-field-dropdown__option[aria-selected="true"] {
  background: rgba(222,146,48,.12) !important;
  color: var(--jr-gold) !important;
}

/* Anything inside a Jetpack form field that still paints white */
.jetpack-field,
.jetpack-field div,
.jetpack-field span,
.jetpack-field [style*="background"] { background-color: transparent !important; }

/* BLOG POST HEADER: title moves above the featured image as a header band,
   with the same 2px gold line as every page header. */
.single-post article.post { display: flex; flex-direction: column; }
.single-post article.post > .entry-header { order: -1; }
.single-post .entry-header {
  padding: 3rem 0 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #DE9230;
}
.single-post .entry-header::before {
  content: "The Jilted Recruiter \00B7  Blog";
  display: block;
  margin-bottom: 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: #5FA6AE;
}
.single-post .entry-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 0.95; letter-spacing: 0.02em;
  color: #F1DEC9; margin: 0;
}