/*
Theme Name: James Newport Liberal Democrat
Theme URI: https://www.jamesnewport.co.uk/
Description: A resident-first Liberal Democrat child theme for James Newport.
Author: James Newport
Version: 1.0.6
Template: kadence
Text Domain: james-newport-libdem
*/

:root {
  --jn-orange: #ff6400;
  --jn-orange-dark: #a83b00;
  --jn-orange-soft: #ffdfcb;
  --jn-navy: #072f5f;
  --jn-ink: #13233a;
  --jn-copy: #344a60;
  --jn-muted: #627383;
  --jn-pale: #f3f6f8;
  --jn-line: #dfe5eb;
  --jn-white: #ffffff;
  --jn-black: #171717;
  --jn-width: 1180px;
}

html { scroll-behavior: smooth; }
body.jn-site { margin: 0; color: var(--jn-ink); background: var(--jn-white); font-family: "Open Sans", Arial, sans-serif; }
body.jn-site * { box-sizing: border-box; }
body.jn-site a { color: inherit; }
.jn-wrap { width: min(var(--jn-width), calc(100% - 40px)); margin-inline: auto; }
.jn-skip { position: absolute; left: -9999px; top: 0; z-index: 99999; background: var(--jn-navy); color: var(--jn-white); padding: 12px 16px; }
.jn-skip:focus { left: 12px; top: 12px; }
.jn-topline { background: var(--jn-navy); color: var(--jn-white); font-size: 12px; }
.jn-topline .jn-wrap { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.jn-header { background: var(--jn-white); border-bottom: 1px solid var(--jn-line); position: relative; z-index: 20; }
.jn-header-row { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.jn-identity { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.jn-logo { width: 54px; height: 44px; object-fit: contain; object-position: left center; flex: 0 0 auto; }
.jn-name { display: block; font-weight: 800; letter-spacing: -.045em; font-size: 23px; line-height: 1; }
.jn-role { display: block; color: var(--jn-copy); font-size: 11px; line-height: 1.35; margin-top: 5px; }
.jn-nav { display: flex; align-items: center; gap: 23px; font-size: 13px; font-weight: 700; }
.jn-nav a { text-decoration: none; padding-block: 12px; }
.jn-nav a:hover, .jn-nav a:focus { color: var(--jn-orange-dark); }
.jn-nav .jn-nav-help { background: var(--jn-orange); color: var(--jn-black); padding: 12px 16px; }
.jn-menu-toggle { display: none; border: 2px solid var(--jn-navy); background: var(--jn-white); color: var(--jn-navy); padding: 10px 12px; font: inherit; font-weight: 800; }

.jn-hero { display: grid; grid-template-columns: 1.07fr .93fr; min-height: 440px; }
.jn-hero-copy { padding: clamp(48px, 7vw, 86px) max(24px, calc((100vw - var(--jn-width))/2)); padding-right: clamp(30px, 6vw, 76px); display: flex; flex-direction: column; justify-content: center; }
.jn-eyebrow { color: var(--jn-orange-dark); font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.jn-hero h1 { max-width: 700px; margin: 13px 0 18px; color: var(--jn-ink); font-size: clamp(38px, 5vw, 66px); line-height: 1.02; letter-spacing: -.055em; font-weight: 800; }
.jn-intro { max-width: 660px; margin: 0 0 27px; color: var(--jn-copy); font-size: 17px; line-height: 1.62; }
.jn-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jn-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 19px; border: 2px solid transparent; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; }
.jn-button-primary { background: var(--jn-orange); color: var(--jn-black); }
.jn-button-secondary { background: var(--jn-white); border-color: var(--jn-navy); color: var(--jn-navy); }
.jn-button-navy { background: var(--jn-navy); color: var(--jn-white); }
.jn-hero-photo { min-height: 380px; position: relative; background: var(--jn-orange-soft); overflow: hidden; }
.jn-hero-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, var(--jn-orange) 0 18%, transparent 18% 75%, var(--jn-navy) 75%); z-index: 1; pointer-events: none; opacity: .88; }
.jn-hero-photo img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; object-position: center 32%; display: block; filter: saturate(.92) contrast(1.02); }

.jn-journeys { background: var(--jn-navy); color: var(--jn-white); }
.jn-journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.jn-journey { min-height: 172px; padding: 28px 25px; border-right: 1px solid rgba(255,255,255,.22); text-decoration: none; }
.jn-journey:last-child { border-right: 0; }
.jn-journey strong { display: block; font-size: 17px; line-height: 1.25; margin-bottom: 7px; }
.jn-journey span { display: block; color: #d9e4ef; font-size: 12px; line-height: 1.55; }
.jn-journey .jn-arrow { color: #ffad79; font-weight: 800; margin-top: 12px; }
.jn-journey:hover, .jn-journey:focus { background: #0c3e76; }

.jn-section { padding-block: 64px; }
.jn-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.jn-section h2, .jn-case-copy h2, .jn-signup h2 { margin: 5px 0 0; color: var(--jn-ink); font-size: clamp(27px, 3.4vw, 38px); line-height: 1.08; letter-spacing: -.04em; font-weight: 800; }
.jn-view-all { color: var(--jn-orange-dark); font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.jn-filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.jn-filter { display: inline-flex; padding: 8px 12px; background: var(--jn-pale); color: var(--jn-navy); border-left: 4px solid var(--jn-navy); font-size: 12px; font-weight: 800; text-decoration: none; }
.jn-filter:hover, .jn-filter:focus, .jn-filter.is-active { background: var(--jn-orange); color: var(--jn-black); border-left-color: var(--jn-orange-dark); }
.jn-blog-search { display: flex; align-items: stretch; max-width: 680px; margin: 0 0 25px; }
.jn-blog-search label { flex: 1 1 auto; }
.jn-blog-search input[type="search"] { width: 100%; min-height: 48px; border: 2px solid var(--jn-navy); border-right: 0; border-radius: 0; background: var(--jn-white); color: var(--jn-ink); padding: 11px 14px; font: inherit; font-size: 14px; }
.jn-blog-search input[type="search"]:focus { outline: 3px solid var(--jn-orange); outline-offset: 2px; }
.jn-blog-search button { min-height: 48px; border: 2px solid var(--jn-navy); border-radius: 0; background: var(--jn-navy); color: var(--jn-white); padding: 11px 19px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.jn-blog-search button:hover, .jn-blog-search button:focus { background: var(--jn-orange); border-color: var(--jn-orange-dark); color: var(--jn-black); }
.jn-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jn-post-card { min-height: 255px; display: flex; flex-direction: column; padding: 26px; background: var(--jn-pale); border-top: 7px solid var(--jn-orange); }
.jn-meta { color: var(--jn-muted); font-size: 10px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.jn-post-card h3 { margin: 13px 0 16px; color: var(--jn-ink); font-size: 19px; line-height: 1.34; letter-spacing: -.025em; font-weight: 800; }
.jn-post-card h3 a { text-decoration: none; }
.jn-post-card h3 a:hover, .jn-post-card h3 a:focus { color: var(--jn-orange-dark); }
.jn-excerpt { margin: 0 0 19px; color: var(--jn-copy); font-size: 13px; line-height: 1.55; }
.jn-read { margin-top: auto; color: var(--jn-navy); font-size: 12px; font-weight: 800; text-decoration: none; }

.jn-casework { margin-bottom: 64px; display: grid; grid-template-columns: .82fr 1.18fr; border: 2px solid var(--jn-navy); }
.jn-case-copy { padding: 42px; background: var(--jn-navy); color: var(--jn-white); }
.jn-case-copy .jn-eyebrow { color: #ffad79; }
.jn-case-copy h2 { color: var(--jn-white); }
.jn-case-copy p { color: #d9e4ef; font-size: 14px; line-height: 1.62; }
.jn-steps { margin: 22px 0 0; padding-left: 20px; color: var(--jn-white); font-size: 13px; line-height: 1.9; }
.jn-case-form { padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: var(--jn-white); }
.jn-field { display: flex; flex-direction: column; gap: 6px; }
.jn-field label { color: var(--jn-ink); font-size: 12px; font-weight: 800; }
.jn-field input, .jn-field select, .jn-field textarea { width: 100%; min-height: 46px; border: 1px solid #a9b7c4; border-radius: 0; background: var(--jn-white); color: var(--jn-ink); padding: 11px 12px; font: inherit; font-size: 14px; }
.jn-field textarea { min-height: 120px; resize: vertical; }
.jn-field-wide, .jn-consent, .jn-form-actions { grid-column: 1 / -1; }
.jn-consent { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 9px; color: var(--jn-copy); font-size: 11px; line-height: 1.5; }
.jn-consent a { color: var(--jn-orange-dark); font-weight: 800; }
.jn-consent input { margin-top: 3px; }
.jn-honeypot { position: absolute; left: -9999px; }
.jn-notice { grid-column: 1 / -1; padding: 12px 14px; font-size: 13px; font-weight: 700; }
.jn-notice-success { background: #e7f4ea; color: #1d5d2e; }
.jn-notice-error { background: #ffeded; color: #8c1d1d; }

.jn-signup { background: var(--jn-orange); color: var(--jn-black); }
.jn-signup-row { min-height: 168px; padding-block: 34px; display: grid; grid-template-columns: 1fr minmax(330px, 480px); align-items: center; gap: 38px; }
.jn-signup h2 { color: var(--jn-black); }
.jn-signup p { margin: 7px 0 0; font-size: 13px; }
.jn-signup .s2_form_widget, .jn-signup form { margin: 0; }
.jn-signup label { font-size: 12px; font-weight: 800; }
.jn-signup input[type="email"], .jn-signup input[type="text"] { min-height: 48px; width: 68%; border: 0; border-radius: 0; padding: 12px 13px; background: var(--jn-white); color: var(--jn-ink); }
.jn-signup input[type="submit"], .jn-signup button { min-height: 48px; border: 0; border-radius: 0; padding: 12px 18px; background: var(--jn-navy); color: var(--jn-white); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

.jn-footer { background: #0d1d2f; color: var(--jn-white); }
.jn-footer-row { min-height: 170px; padding-block: 34px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: start; }
.jn-footer p { margin: 0 0 8px; color: #d8e1e9; font-size: 11px; line-height: 1.65; }
.jn-footer strong { color: var(--jn-white); font-size: 14px; }
.jn-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; font-size: 11px; }
.jn-footer-links a { color: #d8e1e9; text-decoration: none; }

.jn-page-hero { padding-block: 55px; background: var(--jn-pale); border-bottom: 7px solid var(--jn-orange); }
.jn-page-hero h1 { max-width: 900px; margin: 7px 0 0; color: var(--jn-ink); font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -.045em; font-weight: 800; }
.jn-main { padding-block: 55px 72px; }
.jn-article { max-width: 820px; }
.jn-article-content { color: var(--jn-copy); font-size: 17px; line-height: 1.75; }
.jn-article-content h2, .jn-article-content h3 { color: var(--jn-ink); font-weight: 800; letter-spacing: -.03em; }
.jn-article-content a { color: var(--jn-orange-dark); font-weight: 700; }
.jn-featured { margin: 0 0 30px; }
.jn-featured img { width: 100%; height: auto; display: block; }
.jn-pagination { margin-top: 34px; }
.jn-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jn-pagination a, .jn-pagination span { padding: 9px 12px; background: var(--jn-pale); text-decoration: none; font-weight: 800; }
.jn-pagination .current { background: var(--jn-orange); color: var(--jn-black); }
.jn-empty { padding: 24px; background: var(--jn-pale); }

@media (max-width: 980px) {
  .jn-menu-toggle { display: inline-flex; }
  .jn-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; background: var(--jn-white); border-bottom: 2px solid var(--jn-navy); }
  .jn-nav.is-open { display: flex; }
  .jn-nav a { padding: 12px; }
  .jn-hero { grid-template-columns: 1fr; }
  .jn-hero-copy { padding-inline: max(20px, calc((100vw - var(--jn-width))/2)); }
  .jn-hero-photo { min-height: 360px; }
  .jn-hero-photo img { min-height: 360px; }
  .jn-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jn-casework { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .jn-wrap { width: min(var(--jn-width), calc(100% - 28px)); }
  .jn-topline .jn-wrap { justify-content: center; text-align: center; }
  .jn-topline span:last-child { display: none; }
  .jn-header-row { min-height: 74px; }
  .jn-logo { width: 42px; height: 34px; }
  .jn-name { font-size: 18px; }
  .jn-role { max-width: 190px; font-size: 10px; }
  .jn-hero h1 { font-size: 39px; }
  .jn-journey-grid, .jn-post-grid, .jn-signup-row, .jn-footer-row { grid-template-columns: 1fr; }
  .jn-journey { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .jn-section { padding-block: 48px; }
  .jn-section-head { align-items: flex-start; flex-direction: column; }
  .jn-case-copy, .jn-case-form { padding: 27px 22px; }
  .jn-case-form { grid-template-columns: 1fr; }
  .jn-field-wide, .jn-consent, .jn-form-actions, .jn-notice { grid-column: auto; }
  .jn-signup-row { gap: 20px; }
  .jn-signup input[type="email"], .jn-signup input[type="text"] { width: 100%; }
  .jn-signup input[type="submit"], .jn-signup button { width: 100%; }
  .jn-blog-search { flex-direction: column; }
  .jn-blog-search input[type="search"] { border-right: 2px solid var(--jn-navy); }
  .jn-blog-search button { width: 100%; }
  .jn-footer-links { justify-content: flex-start; }
}