/* ===========================================================================
   blog.jamiesteedman.co.uk — the main site's look on top of the Coppola theme.
   Tokens and the header/footer rules mirror public/assets/css/flayr.css and
   site.css on www.jamiesteedman.co.uk. Everything is scoped to body.jsb-branded
   so turning the plugin off restores the theme exactly.
   ======================================================================== */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(fonts/geist-mono-latin.woff2) format('woff2');
}

body.jsb-branded {
  --jsb-navy: #1B2B48; --jsb-navy-hover: #26395C;
  --jsb-teal: #58C0B3; --jsb-teal-deep: #3F8C85; --jsb-teal-ink: #2E766F;
  --jsb-mint: #C2F2E9; --jsb-mint-soft: #E7F7F4;
  --jsb-bg: #FAFAFC; --jsb-surface: #FFFFFF; --jsb-surface-2: #F2F2F5; --jsb-surface-3: #E8E8ED;
  --jsb-ink: #0D1625; --jsb-text: #343B49; --jsb-muted: #5F6D82; --jsb-faint: #8A93A5;
  --jsb-hairline: rgba(13, 22, 37, .07);
  --jsb-r: 14px; --jsb-r-lg: 20px; --jsb-r-xl: 28px; --jsb-pill: 980px;
  --jsb-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --jsb-gutter: clamp(16px, 4vw, 32px);
  --jsb-ease: cubic-bezier(.25, .1, .25, 1);

  /* The theme reads these for its own colours and fonts. */
  --qode-main-color: var(--jsb-teal-ink);

  background: var(--jsb-bg) !important;
  color: var(--jsb-text);
  font-family: var(--jsb-font) !important;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------- the theme's chrome -- */
body.jsb-branded #qodef-top-area,
body.jsb-branded #qodef-page-header,
body.jsb-branded #qodef-page-mobile-header,
body.jsb-branded #qodef-page-footer,
body.jsb-branded #qodef-back-to-top,
body.jsb-branded .qodef-header-sticky { display: none !important; }
body.jsb-branded #qodef-page-wrapper,
body.jsb-branded #qodef-page-outer,
body.jsb-branded #qodef-page-inner,
body.jsb-branded .qodef-page-content-section,
body.jsb-branded #qodef-page-content { background: transparent !important; }
/* The theme leaves room for its own (now hidden) header. */
body.jsb-branded #qodef-page-outer { margin-top: 0 !important; padding-top: 0 !important; }

/* ------------------------------------------------------------- type -- */
body.jsb-branded,
body.jsb-branded p, body.jsb-branded li, body.jsb-branded a, body.jsb-branded span,
body.jsb-branded input, body.jsb-branded textarea, body.jsb-branded select, body.jsb-branded button,
body.jsb-branded blockquote, body.jsb-branded label, body.jsb-branded td, body.jsb-branded th,
body.jsb-branded [class*="qodef-"] { font-family: var(--jsb-font) !important; }
body.jsb-branded code, body.jsb-branded pre, body.jsb-branded kbd { font-family: 'Geist Mono', ui-monospace, Menlo, monospace !important; }

body.jsb-branded h1, body.jsb-branded h2, body.jsb-branded h3,
body.jsb-branded h4, body.jsb-branded h5, body.jsb-branded h6,
body.jsb-branded .qodef-e-title, body.jsb-branded .qodef-page-title .qodef-m-title {
  font-family: var(--jsb-font) !important;
  color: var(--jsb-ink) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  line-height: 1.12 !important;
}
body.jsb-branded h1, body.jsb-branded .qodef-page-title .qodef-m-title { font-size: clamp(36px, 5vw, 56px) !important; letter-spacing: -0.03em !important; }
body.jsb-branded h2 { font-size: clamp(28px, 3.6vw, 40px) !important; }
body.jsb-branded h3 { font-size: clamp(22px, 2.4vw, 28px) !important; }
body.jsb-branded h4 { font-size: 21px !important; }
body.jsb-branded h5, body.jsb-branded h6 { font-size: 17px !important; }
body.jsb-branded p, body.jsb-branded li { color: var(--jsb-text); }

body.jsb-branded a { color: var(--jsb-teal-ink); }
body.jsb-branded a:hover { color: var(--jsb-teal-deep); }
body.jsb-branded h1 a, body.jsb-branded h2 a, body.jsb-branded h3 a,
body.jsb-branded h4 a, body.jsb-branded .qodef-e-title a { color: var(--jsb-ink) !important; }
body.jsb-branded ::selection { background: var(--jsb-mint); color: var(--jsb-ink); }

/* ------------------------------------------- page title band (blog) -- */
body.jsb-branded .qodef-page-title {
  background: var(--jsb-bg) !important;
  background-image: none !important;
  height: auto !important;
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px) !important;
}
body.jsb-branded .qodef-page-title .qodef-m-inner,
body.jsb-branded .qodef-page-title .qodef-m-content { height: auto !important; }
body.jsb-branded .qodef-page-title .qodef-breadcrumbs,
body.jsb-branded .qodef-page-title .qodef-breadcrumbs a { color: var(--jsb-muted) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important; }

/* ------------------------------------------------- images & media ---- */
body.jsb-branded .qodef-e-media img,
body.jsb-branded .qodef-e-media-image,
body.jsb-branded .qodef-blog img,
body.jsb-branded .entry-content img,
body.jsb-branded .qodef-e-content img,
body.jsb-branded .wp-block-image img,
body.jsb-branded figure img { border-radius: var(--jsb-r-lg); }
body.jsb-branded .qodef-e-media,
body.jsb-branded .qodef-e-media-image { border-radius: var(--jsb-r-lg); overflow: hidden; }
body.jsb-branded iframe { border-radius: var(--jsb-r-lg); }

/* ------------------------------------------------- blog list & post -- */
body.jsb-branded .qodef-blog .qodef-blog-item,
body.jsb-branded .qodef-blog-item {
  background: var(--jsb-surface);
  border-radius: var(--jsb-r-xl);
  padding: clamp(16px, 2vw, 24px);
  border: 0 !important;
  box-shadow: none !important;
}
body.jsb-branded .qodef-e-info, body.jsb-branded .qodef-e-info a,
body.jsb-branded .qodef-e-info-item, body.jsb-branded .qodef-e-info-item a {
  color: var(--jsb-muted) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0 !important;
}
body.jsb-branded .qodef-e-info-category a,
body.jsb-branded .qodef-e-info-item.qodef-e-info-category a { color: var(--jsb-teal-ink) !important; font-weight: 500; }
body.jsb-branded .qodef-e-excerpt, body.jsb-branded .qodef-e-text { color: var(--jsb-text); }
body.jsb-branded hr { border: 0; height: 1px; background: var(--jsb-hairline); }
body.jsb-branded blockquote, body.jsb-branded .wp-block-quote {
  border: 0 !important; background: var(--jsb-surface); border-radius: var(--jsb-r-lg);
  padding: 24px 28px !important; color: var(--jsb-ink); font-size: 21px; line-height: 1.4;
}

/* Sidebar widgets as quiet cards. */
body.jsb-branded #qodef-page-sidebar .widget,
body.jsb-branded .qodef-page-sidebar .widget { background: var(--jsb-surface); border-radius: var(--jsb-r-lg); padding: 22px; border: 0 !important; }
body.jsb-branded .widget .qodef-widget-title, body.jsb-branded .widget-title,
body.jsb-branded .widget h2, body.jsb-branded .widget h3, body.jsb-branded .widget h4 { font-size: 17px !important; letter-spacing: -0.01em !important; }

/* -------------------------------------------- buttons, forms, tags --- */
body.jsb-branded .qodef-button, body.jsb-branded .qodef-theme-button,
body.jsb-branded button, body.jsb-branded input[type="submit"], body.jsb-branded .wp-block-button__link,
body.jsb-branded .qodef-m-pagination a, body.jsb-branded .page-numbers {
  border-radius: var(--jsb-pill) !important;
  font-family: var(--jsb-font) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-weight: 500 !important;
}
body.jsb-branded .qodef-button.qodef-layout--filled, body.jsb-branded .qodef-theme-button,
body.jsb-branded input[type="submit"], body.jsb-branded .wp-block-button__link,
body.jsb-branded .wpcf7-submit, body.jsb-branded .mailpoet_submit {
  background: var(--jsb-navy) !important; color: #fff !important; border: 0 !important;
}
body.jsb-branded .qodef-button.qodef-layout--filled:hover, body.jsb-branded .qodef-theme-button:hover,
body.jsb-branded input[type="submit"]:hover, body.jsb-branded .wp-block-button__link:hover { background: var(--jsb-navy-hover) !important; }
body.jsb-branded input[type="text"], body.jsb-branded input[type="email"], body.jsb-branded input[type="search"],
body.jsb-branded input[type="url"], body.jsb-branded input[type="tel"], body.jsb-branded textarea, body.jsb-branded select {
  background: var(--jsb-surface-2) !important; border: 0 !important; border-radius: var(--jsb-r) !important;
  color: var(--jsb-ink) !important; padding: 11px 14px !important; box-shadow: none !important;
}
body.jsb-branded input:focus, body.jsb-branded textarea:focus, body.jsb-branded select:focus {
  outline: none !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(88, 192, 179, .35) !important;
}
body.jsb-branded .qodef-e-tags a, body.jsb-branded .tagcloud a, body.jsb-branded .wp-block-tag-cloud a {
  display: inline-block; background: var(--jsb-surface-2); border: 0 !important; border-radius: var(--jsb-pill) !important;
  padding: 4px 12px !important; margin: 0 6px 6px 0; font-size: 13px !important; color: var(--jsb-text) !important; text-transform: none !important;
}
body.jsb-branded .page-numbers.current, body.jsb-branded .qodef-m-pagination .qodef--active { background: var(--jsb-navy) !important; color: #fff !important; }

/* ============================================== header (main site) === */
.jsb-nav {
  position: sticky; top: 0; z-index: 9990;
  background: rgba(250, 250, 252, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-family: var(--jsb-font);
}
body.admin-bar .jsb-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .jsb-nav { top: 46px; } }
.jsb-container { width: 100%; max-width: calc(1400px + var(--jsb-gutter) * 2); margin: 0 auto; padding: 0 var(--jsb-gutter); box-sizing: border-box; }
.jsb-nav-inner { display: flex; align-items: center; gap: 28px; height: 52px; }
.jsb-nav .jsb-wordmark { flex: none; font-size: 17px; font-weight: 600; letter-spacing: -0.025em; color: var(--jsb-ink) !important; white-space: nowrap; text-decoration: none; }
.jsb-nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0 auto !important; padding: 0 !important; }
.jsb-nav-links li { margin: 0 !important; padding: 0 !important; list-style: none; }
.jsb-nav-links li::before { content: none !important; }
.jsb-nav-links a { color: var(--jsb-ink) !important; opacity: .8; font-size: 13px; font-weight: 400; letter-spacing: -0.005em; text-decoration: none; transition: opacity .2s; }
.jsb-nav-links a:hover, .jsb-nav-links a[aria-current="page"] { opacity: 1; }
.jsb-nav-links a[aria-current="page"] { font-weight: 500; }
.jsb-nav-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.jsb-crosslink { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: var(--jsb-pill); background: var(--jsb-surface-2); color: var(--jsb-ink) !important; font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.jsb-crosslink:hover { background: var(--jsb-surface-3); }
.jsb-icon { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.jsb-crosslink .jsb-icon { width: 13px; height: 13px; }
.jsb-burger { display: none; place-items: center; width: 34px; height: 34px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--jsb-ink) !important; cursor: pointer; }
.jsb-burger:hover { background: rgba(13, 22, 37, .05) !important; }
@media (max-width: 860px) {
  .jsb-nav-links { display: none; }
  .jsb-burger { display: grid; }
  .jsb-nav-inner { justify-content: space-between; }
  /* backdrop-filter would make the header the containing block of the fixed panel. */
  .jsb-nav.is-open { background: var(--jsb-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .jsb-nav.is-open .jsb-nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: fixed; inset: 52px 0 0 0; background: var(--jsb-bg); padding: 16px var(--jsb-gutter) 40px !important; overflow-y: auto; margin: 0 !important;
  }
  .jsb-nav.is-open .jsb-nav-links li { width: 100%; }
  .jsb-nav.is-open .jsb-nav-links a { display: block; font-size: 28px; font-weight: 600; opacity: 1; padding: 8px 0; letter-spacing: -0.02em; }
}

/* ============================================== footer (main site) === */
.jsb-footer { background: var(--jsb-surface-2); color: var(--jsb-muted); font-family: var(--jsb-font); font-size: 12px; line-height: 1.5; padding: 40px 0 28px; margin-top: 64px; }
.jsb-footer a { color: var(--jsb-text) !important; text-decoration: none; font-size: 12px; }
.jsb-footer a:hover { color: var(--jsb-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.jsb-footer p, .jsb-footer li, .jsb-footer span { font-size: 12px; color: var(--jsb-muted); }
.jsb-footer-note { margin: 0 0 22px !important; padding-bottom: 18px; box-shadow: inset 0 -1px 0 var(--jsb-hairline); }
.jsb-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-bottom: 28px; }
.jsb-footer-cols h4 { font-size: 12px !important; font-weight: 600 !important; color: var(--jsb-ink) !important; margin: 0 0 10px !important; letter-spacing: 0 !important; line-height: 1.5 !important; }
.jsb-footer-cols ul { list-style: none; margin: 0 !important; padding: 0 !important; }
.jsb-footer-cols li { margin: 0 0 8px !important; padding: 0 !important; list-style: none; }
.jsb-footer-cols li::before { content: none !important; }
.jsb-footer-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 16px; box-shadow: inset 0 1px 0 var(--jsb-hairline); }
.jsb-footer-base nav { display: flex; gap: 14px; flex-wrap: wrap; }
.jsb-footer-social { display: flex; gap: 6px; }
.jsb-footer-social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--jsb-muted) !important; }
.jsb-footer-social a:hover { color: var(--jsb-ink) !important; background: var(--jsb-surface-3); text-decoration: none; }
.jsb-footer-social .jsb-icon { width: 15px; height: 15px; }
@media (max-width: 860px) { .jsb-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================================== blog front page & archive title === */
.jsb-hero { text-align: center; padding: clamp(56px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); font-family: var(--jsb-font); }
.jsb-eyebrow { display: block; font-size: 21px; font-weight: 600; color: var(--jsb-teal-ink); margin-bottom: 8px; letter-spacing: -0.01em; }
body.jsb-branded .jsb-hero-title { font-size: clamp(44px, 7vw, 80px) !important; line-height: 1.05 !important; letter-spacing: -0.035em !important; font-weight: 650 !important; margin: 0 0 .2em !important; color: var(--jsb-ink) !important; }
.jsb-lead { max-width: 680px; margin: 14px auto 0 !important; font-size: clamp(19px, 1.8vw, 24px) !important; line-height: 1.4 !important; color: var(--jsb-muted) !important; letter-spacing: -0.015em; }
body.jsb-branded.jsb-has-hero .qodef-page-title { display: none !important; }
/* Single posts keep a slim breadcrumb band. */
body.jsb-branded.single .qodef-page-title { padding: 28px 0 8px !important; }

/* Category labels as pills, like the main site's tags. */
body.jsb-branded .qodef-e-info-category a,
body.jsb-branded .qodef-e-info .qodef-e-info-item.qodef-e-info-category a {
  display: inline-block; background: var(--jsb-mint-soft) !important; color: var(--jsb-teal-ink) !important;
  border-radius: var(--jsb-pill) !important; padding: 3px 10px !important; margin: 0 4px 4px 0;
  font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important;
}
body.jsb-branded .qodef-e-info a[rel~="tag"],
body.jsb-branded .qodef-e-info a[rel~="category"] {
  display: inline-block; background: var(--jsb-mint-soft) !important; color: var(--jsb-teal-ink) !important;
  border-radius: var(--jsb-pill) !important; padding: 3px 10px !important; margin: 0 4px 4px 0;
  font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important; border: 0 !important;
}
/* Calendar and other widget tables: no borders, like the main site's tables. */
body.jsb-branded .widget table, body.jsb-branded .wp-calendar-table, body.jsb-branded .wp-calendar-table th, body.jsb-branded .wp-calendar-table td,
body.jsb-branded .widget table th, body.jsb-branded .widget table td { border: 0 !important; background: transparent; }
body.jsb-branded .wp-calendar-table td, body.jsb-branded .wp-calendar-table th { padding: 6px 0 !important; text-align: center; font-size: 13px; }
body.jsb-branded .wp-calendar-table #today, body.jsb-branded .wp-calendar-table td#today { background: var(--jsb-mint) !important; color: var(--jsb-ink) !important; border-radius: 50%; }
body.jsb-branded .wp-calendar-table caption { font-weight: 600; color: var(--jsb-ink); margin-bottom: 6px; }
/* The hero already gives the space above the posts; drop the theme's 130px. */
body.jsb-branded.jsb-has-hero #qodef-page-inner { padding-top: 8px !important; }
/* The theme paints all text with -webkit-text-fill-color in its own grey, which
   wins over color; let every element use its color again. */
body.jsb-branded, body.jsb-branded * { -webkit-text-fill-color: currentColor !important; }
/* The theme's h4 sizes win over the footer's; pin them to the main site's. */
body.jsb-branded .jsb-footer h4 { font-family: var(--jsb-font) !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--jsb-ink) !important; margin: 0 0 10px !important; }
body.jsb-branded .jsb-footer a, body.jsb-branded .jsb-footer p, body.jsb-branded .jsb-footer span { font-size: 12px !important; }