/*
Theme Name: Sea Kayak Paddler (blocks)
Theme URI: https://seakayakpaddler.co.uk/
Author: Quietwork
Author URI: https://quietwork.co.uk/
Description: Block theme for Sea Kayak Paddler (6 Nov 2026): the design of the classic skp theme as block templates and template parts, with theme.json styles editable in Appearance > Editor > Styles. The features are the Sea Kayak Paddler core plugin.
Version: 2.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: skp
*/

/* Palette and type from templates/skp_template/css/template.css */
:root {
  /* The colours are set ONCE, in theme.json (settings.color.palette, 6 Nov 2026); each fallback is the same value. */
  --skp-navy: var(--wp--preset--color--navy, #004288);       /* header band */
  --skp-blue: var(--wp--preset--color--blue, #134584);       /* links, headings, cards */
  --skp-blue-2: var(--wp--preset--color--blue-2, #1F4881);   /* newsletter row */
  --skp-deep: var(--wp--preset--color--deep, #132D48);
  --skp-red: var(--wp--preset--color--red, #D71830);         /* footer, hovers */
  --skp-red-2: var(--wp--preset--color--red-2, #D22334);     /* buttons */
  --skp-grey-bg: var(--wp--preset--color--grey-bg, #EDEDED);
  --skp-grey-dark: var(--wp--preset--color--grey-dark, #494949); /* legal strip */
  --skp-line: var(--wp--preset--color--line, #E0E0E0);
  --skp-text: var(--wp--preset--color--black, #000000);
  --skp-muted: var(--wp--preset--color--muted, #7A7A7A);
  /* Wide layout (7 Nov 2026, Owen: "make better use of the screen real estate"; then "too wide", so 1320px). One fluid
     container for the whole site, capped at 1320px, with side space from 16px on a phone to 48px on a wide screen.
     Text keeps a reading measure. */
  --skp-container: var(--wp--custom--container, 1320px);
  --skp-gutter: clamp(16px, 3vw, 48px);
  --skp-measure: var(--wp--style--global--content-size, 640px); /* about 72 characters of body text */
  --skp-aside: clamp(260px, 22%, 340px);                         /* the Refine panel and the article sidebar */
  --skp-aside-gap: clamp(30px, 2.5vw, 44px);                     /* the space before either of them, the same everywhere */
  /* One soft shadow for the cards, the home lead and list items (10 Nov 2026, Owen: "the slight shadows ... are nice") */
  --skp-shadow: 0 1px 2px rgba(19, 45, 72, .06), 0 6px 18px -6px rgba(19, 45, 72, .18);
}
/* More side space on small laptops (10 Nov 2026, Owen: "on small laptops, we need a bit more space left and right").
   Phones and iPad portrait (820 and below) keep 3vw exactly. Above that the gutter climbs from 3vw (24.6px at 820) to
   about 48px at 1024, then more gently to 64px at 1440; the two lines meet at about 1012px, so it never jumps. At 1460
   and wider the 1320px cap leaves more than 64px anyway, so wide screens do not change. Every container, band and the
   About page take their side space from this one property. */
@media (min-width: 821px) {
  :root { --skp-gutter: clamp(3vw, min(12vw - 74px, 3.9vw + 8px), 64px); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* flex rows and panels: the attribute must still win */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--skp-grey-bg);
  color: var(--skp-text);
  font-family: var(--wp--preset--font-family--body, sofia-pro, "Nunito Sans", "Helvetica Neue", Arial, sans-serif);
  font-weight: 400;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
p, ol, ul { font-size: 17px; font-weight: 300; line-height: 1.55; margin: 0 0 1em; }
a { color: var(--skp-text); word-wrap: break-word; }
a:hover, a:focus { color: #143A67; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; color: var(--skp-blue); line-height: 1.15; }
h2 a, h3 a, h4 a { color: var(--skp-blue); text-decoration: none; }
h2 a:hover, h3 a:hover, h4 a:hover { color: var(--skp-red); }
:focus-visible { outline: 3px solid var(--skp-red); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; clip: auto; width: auto; height: auto; background: #fff; padding: 8px 12px; }

/* width, not padding: several containers (.skp-crumbs) set their own padding, which would wipe a padded gutter */
.container { width: min(var(--skp-container), 100% - 2 * var(--skp-gutter)); margin: 0 auto; position: relative; }

/* ---- Header band (#headerRowWide) ---- */
.skp-header { background: var(--skp-navy); }
/* Top strip (10 Nov 2026, Owen, from the ChatGPT header mockup: "I like that top section"): the strapline left and the
   three topics right, small tracked capitals in a LIGHT weight (he found the mockup's too heavy), on the same container
   edges as the logo and hero, with a thin see-through line under it. Phones show the strapline only, on one line. */
.skp-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 9px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.skp-topbar p { margin: 0; font-size: 11.5px; line-height: 1.4; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .88); white-space: nowrap; }
.skp-topbar-tag strong { font-weight: 400; color: #fff; } /* a touch heavier and brighter than the rest, no more */
.skp-topbar-topics { overflow: hidden; text-overflow: ellipsis; }
.skp-header-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.skp-logo { display: block; width: 150px; padding: 16px 0 14px; } /* the size the old site showed it (2 Nov, Owen: "the giant logos") */
.skp-logo img { display: block; width: 100%; height: auto; }
.skp-header-right { display: flex; align-items: center; padding-top: 2px; } /* level with the middle of the logo, as in the mockup (2px evens out the logo's 16px/14px padding) */
/* Icons on the wordmark baseline (10 Nov 2026, Owen: "towards the bottom of the blue horizontal bar"): their bottom edge
   meets the bottom of the SEA KAYAK PADDLER letters, i.e. the logo's 14px bottom padding plus the 0.4px of transparent
   PNG under the glyphs (ink ends on row 274 of 275). The li go flex so the line box's descender space (about 6px) does
   not sit under the svgs. Tablet and up only: phones keep the centred menu toggle. */
@media (min-width: 768px) {
  .skp-header-right { align-self: flex-end; padding-top: 0; padding-bottom: 14.4px; }
  .skp-social-head li { display: flex; }
}
.skp-social { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.skp-social-head { gap: 18px; }
.skp-social a { color: #fff; display: inline-flex; }
.skp-social a:hover, .skp-social a:focus { color: var(--skp-red); }
.skp-social svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.skp-menu-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; }
.skp-menu-toggle svg { width: 36px; height: 36px; fill: currentColor; }

/* ---- White menu bar (#greenmenu) ---- */
/* Plain text items with a red underline for the current page and on hover (10 Nov 2026, Owen: "I do prefer that simpler
   menu style of just having an underline"), replacing the 5 Nov red pills. Links have no side padding, so HOME's text and
   its underline start on the container edge, level with the logo and the hero, and the search icon ends on the right
   edge. The underline is drawn by ::after inside each link's own box, so no state moves or resizes anything. A soft
   shadow under the bar replaces the old grey rule. */
.skp-nav { background: #fff; border-bottom: 1px solid rgba(19, 45, 72, .06); box-shadow: 0 6px 16px -8px rgba(19, 45, 72, .28); position: relative; z-index: 2; }
.skp-nav .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.skp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: clamp(18px, 2.4vw, 36px); }
.skp-nav a { position: relative; display: block; padding: 16px 0 15px; color: var(--skp-blue); text-decoration: none; text-transform: uppercase; font-size: 15px; font-weight: 400; letter-spacing: .03em; transition: color .15s; }
.skp-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--skp-red); transform: scaleX(0); transition: transform .18s ease-out; }
.skp-nav a:hover::after, .skp-nav a:focus-visible::after,
.skp-nav .current-menu-item > a::after, .skp-nav .current-menu-parent > a::after, .skp-nav .current-post-ancestor > a::after { transform: scaleX(1); }
.skp-nav a:focus-visible, .skp-search-link:focus-visible { outline: 2px solid var(--skp-blue); outline-offset: 2px; border-radius: 2px; }
.skp-search-link { color: var(--skp-blue); display: inline-flex; padding: 10px 0 10px 10px; transition: color .15s; } /* no right padding: the icon ends on the edge */
.skp-search-link:hover { color: var(--skp-red); }
.skp-search-link svg { width: 20px; height: 20px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .skp-nav a::after { transition: none; } }

/* ---- Overlay menu (mobile, from #myNav) ---- */
/* slides in from the right (10 Nov 2026, was an animated width): transform only, so no layout work per frame. Closed it is
   hidden, so its links cannot take focus or be read; visibility waits for the slide-out to finish before it hides. */
.skp-overlay { position: fixed; inset: 0 0 0 auto; width: 100%; overflow-x: hidden; z-index: 50; background: rgba(21, 59, 102, .96); transform: translateX(100%); visibility: hidden; will-change: transform; transition: transform .35s ease, visibility 0s linear .35s; }
.skp-overlay.open { transform: none; visibility: visible; transition: transform .35s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .skp-overlay, .skp-overlay.open { transition: none; } }
.skp-overlay-inner { text-align: center; padding: 20px; }
.skp-overlay .skp-close { display: block; margin-left: auto; background: none; border: 0; color: #fff; font-size: 42px; cursor: pointer; line-height: 1; }
.skp-overlay img { width: 100px; margin: 10px auto 20px; display: block; }
.skp-overlay ul { list-style: none; margin: 0; padding: 0; }
.skp-overlay a { color: #fff; text-decoration: none; font-size: 26px; display: block; padding: 6px; }
.skp-overlay a:hover { color: #A5A5A5; }
.skp-overlay .current-menu-item > a, .skp-overlay .current-menu-parent > a, .skp-overlay .current-post-ancestor > a { text-decoration: underline; text-decoration-color: var(--skp-red); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.skp-overlay a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 9px; }
.skp-overlay form { margin-top: 30px; }

/* ---- Breadcrumbs ---- */
.skp-crumbs { padding: 12px 0 0; font-size: 14px; color: #8a7d7d; }
.skp-crumbs a { color: var(--skp-blue); text-decoration: none; }
.skp-crumbs span.sep { margin: 0 6px; color: #b8aaaa; }

/* ---- Main layout ---- */
.skp-main { padding: 25px 0 40px; }
.skp-columns { display: flex; gap: var(--skp-aside-gap); align-items: flex-start; }
.skp-content { flex: 1 1 auto; min-width: 0; }
.skp-sidebar { flex: 0 0 var(--skp-aside); min-width: 0; }
.skp-page-title { font-size: 34px; margin: 6px 0 22px; }

/* ---- Cards (mod_news_pro_gk5 nspArt nspCol3) ---- */
.skp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px clamp(20px, 2.2vw, 36px); }
.skp-card { background: #fff; border-radius: 0 0 9px 9px; overflow: hidden; padding-bottom: 18px; display: flex; flex-direction: column; box-shadow: var(--skp-shadow); }
.skp-card:nth-child(even) { background: var(--skp-blue); }
/* the photo's own shadow onto the card body, softened 10 Nov (was 0 3px 12px #C4C4C4, and #11294B on the blue cards) */
.skp-card .skp-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(19, 45, 72, .10); }
.skp-card:nth-child(even) .skp-card-img { box-shadow: 0 2px 8px rgba(8, 22, 45, .30); }
.skp-card .skp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.skp-card:hover .skp-card-img img { transform: scale(1.04); }
.skp-card h3 { font-size: 21px; padding: 12px 10px 8px; }
.skp-card h3 a { color: var(--skp-blue); }
.skp-card:nth-child(even) h3 a { color: #fff; }
.skp-card h3 a:hover { color: var(--skp-red); }
.skp-card:nth-child(even) h3 a:hover { color: #ECECEC; }
.skp-card .skp-meta { padding: 0 10px; margin: auto 0 0; font-size: 13px; color: #ADADAD; }
.skp-tag { display: inline-block; background: var(--skp-blue); color: #fff; text-decoration: none; padding: 0 5px 2px; font-size: 13px; margin-right: 6px; border-radius: 4px; }
.skp-tag:hover { color: #fff; background: var(--skp-red); }
.skp-card:nth-child(even) .skp-tag { background: #fff; color: var(--skp-blue-2); }

/* Home: first article (moduletable first nspCol1) */
.skp-lead { display: flex; background: #fff; border-radius: 0 0 9px 9px; margin-bottom: 35px; overflow: hidden; box-shadow: var(--skp-shadow); } /* square top, rounded bottom, like .skp-card */
.skp-lead .skp-lead-img { flex: 0 1 65%; display: block; }
.skp-lead .skp-lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.skp-lead .skp-lead-body { flex: 1 1 35%; padding: 40px 22px 22px; display: flex; flex-direction: column; }
.skp-lead h2 { font-size: 30px; margin-bottom: 12px; }
.skp-lead p { font-size: 16px; }
.skp-section-title { font-size: 30px; margin: 10px 0 22px; }
.skp-more-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* Buttons */
.skp-btn, .skp-more-row a, .wp-block-button__link { display: inline-block; background: var(--skp-red-2); color: #fff; text-decoration: none; padding: 7px 14px; font-size: 15px; border: 0; border-radius: 7px; cursor: pointer; }
.skp-btn:hover, .skp-more-row a:hover { background: var(--skp-blue); color: #fff; }

/* ---- Category list (catblog skp-blog-article) ---- */
.skp-list-item { display: flex; background: #fff; margin-bottom: 20px; border-radius: 9px; overflow: hidden; box-shadow: var(--skp-shadow); }
.skp-list-item .skp-list-img { flex: 0 0 22%; display: block; overflow: hidden; }
.skp-list-item .skp-list-img img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.skp-list-item .skp-list-body { flex: 1 1 auto; background: #F7F7F7; padding: 15px; }
.skp-list-item h2 { font-size: 23px; margin-bottom: 6px; }
.skp-list-item p { font-size: 15px; margin: 0; }
.skp-list-item .skp-meta { font-size: 13px; color: #999; margin-bottom: 6px; }
/* Page links on News, date archives and search (11 Nov, Owen: "Fix this on the news page and anywhere else it appears").
   paginate_links(type=list) puts class page-numbers on the UL as well as on each link, so the old .skp-pagination
   .page-numbers rule boxed the whole list in white and stacked it. Now the UL is one centred row and only the links and
   the current page are pills, the same look as the Articles page (.skp-page in skp-core refine.css): 44px tap targets,
   current page filled blue, Newer and Older uppercase, the dots a plain gap. Wraps on a phone only if it runs out of room. */
.skp-pagination { margin-top: 25px; }
.skp-pagination ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; background: transparent; }
.skp-pagination li { margin: 0; padding: 0; }
.skp-pagination li > .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 9px;
  background: #fff; color: var(--skp-blue); font-size: 15px; font-weight: 600; text-decoration: none; line-height: 1; transition: background-color .15s, color .15s; }
.skp-pagination li > a.page-numbers:hover { background: #FCE8EA; color: var(--skp-red); }
.skp-pagination li > .page-numbers.current { background: var(--skp-blue); color: #fff; }
.skp-pagination li > .page-numbers.prev, .skp-pagination li > .page-numbers.next { text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.skp-pagination li > .page-numbers.dots { background: transparent; min-width: 20px; padding: 0 2px; }
@media (max-width: 480px) { .skp-pagination li > .page-numbers:not(.dots) { padding: 0 12px; } }
/* The Articles page's own pills (refine.css, 42px, 40px under 480px) brought to the same 44px tap target from here, so no
   plugin upload is needed; the gap keeps its narrow width */
.skp-articles .skp-pagination .skp-page:not(.is-gap) { min-width: 44px; height: 44px; }

/* ---- Article (item-page) ---- */
.skp-article { background: transparent; }
.skp-article h1 { font-size: 38px; margin: 6px 0 12px; }
.skp-article .skp-meta { color: #9a9a9a; font-size: 15px; margin-bottom: 18px; }
.skp-article .skp-hero { margin: 0 0 20px; }
.skp-article .skp-hero img { width: 100%; display: block; }
/* Wide layout: the photo, tables, videos and pros and cons use the column; running text keeps the reading measure */
.skp-article h1 { max-width: 30em; }
.skp-article .skp-body > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-heading, .wp-block-list, .wp-block-quote, .authorblock) { max-width: var(--skp-measure); }
/* Single article (7 Nov 2026, Owen: "this looks a bit messed up"): one column. The photo fills it, the credit line ends at
   the photo's right edge, and At a glance sits at the top of the body (moved there after the credit by functions.php,
   skp_theme_article_specs). Since 12 Nov 2026 (Owen: "lets make these white box sections full width") the box spans the
   full column at every width and the text starts below it; functions.php still adds is-beside-text, which no longer
   floats anything. */
.skp-article .skp-body { display: flow-root; } /* held the floated box until 12 Nov; still contains any floated photo */
/* One right edge on a single article (7 Nov 2026, Owen: "whats with the narrow text"): the text stopped at 640px, the
   photos at their own 800px and the Written by box ran the full column, three edges. Now the whole article (title, photo,
   credit, At a glance, text, quotes and the author box, which the_content appends inside .skp-body) is one column capped
   at 800px, the width the imported photos were saved at, so they meet the text edge without being blown up, and 18px
   text reads at about 90 characters. The text runs the full width of it. The sidebar keeps its place at the container's
   right edge. Scoped to .skp-content > .skp-article, the single template only: pages keep the 640px measure. */
.skp-content > .skp-article { --skp-measure: 800px; max-width: var(--skp-measure); }
.skp-content > .skp-article .skp-body > :is(p, ul, ol, h2, h3, h4, h5, h6, blockquote, .wp-block-heading, .wp-block-list, .wp-block-quote, .authorblock) { max-width: none; }
/* a lead photo in the body (the first thing in it, or straight after the credit or At a glance) fills the column too */
.skp-content > .skp-article .skp-body > :is(:first-child, .skp-credit + *, .skp-specs + *):is(figure.wp-block-image, .wp-block-image):not(.alignleft, .alignright, .is-resized) img { width: 100%; }
.skp-article .skp-body > .skp-credit { max-width: none; text-align: right; margin: -12px 0 18px; font-size: 15px; }
.skp-article .skp-body h2 { font-size: 28px; margin: 34px 0 12px; }
.skp-article .skp-body h3 { font-size: 24px; margin: 32px 0 12px; }
.skp-article .skp-body h4 { font-size: 20px; margin: 24px 0 8px; }
.skp-article .skp-body img { max-width: 100%; height: auto; }
.skp-article .skp-body iframe { max-width: 100%; }
.skp-article .skp-body table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; background: #fff; font-size: 15px; }
.skp-article .skp-body td, .skp-article .skp-body th { border: 1px solid #ddd; padding: 6px 8px; vertical-align: top; }
.skp-article .skp-body blockquote { border: 3px solid var(--skp-red); padding: 25px 25px 9px; background: #fff; margin: 1.5em 0; }
.skp-article .skp-body figure { margin: 0 0 1em; }
.skp-article .skp-body figcaption { color: #A79A9A; font-size: small; }
.skp-article .skp-body p.rrp { color: var(--skp-red); font-size: 20px; font-weight: 400; }
.skp-article .skp-body .authorblock { background: #B6B6B6; border-radius: 7px; padding: 18px; display: flex; gap: 15px; margin: 30px 0; }
.skp-article .skp-body .authorblock p { color: #fff; margin: 0; font-size: 15px; }
.skp-article .skp-body .authorblock p:first-of-type { font-weight: bold; }
.skp-article .skp-body .profilepic { flex: 0 0 20%; display: flex; align-items: center; justify-content: center; }
.skp-specs { background: #fff; border-left: 4px solid var(--skp-blue); padding: 14px 18px; margin: 0 0 26px; font-size: 15px; }
.skp-specs dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.skp-specs dt { color: var(--skp-blue); font-weight: 600; }
.skp-specs dd { margin: 0; }
.skp-specs a { color: var(--skp-blue); }
/* At a glance across the full width of the article (12 Nov 2026). Owen, 12 Nov, second pass: "Keep all the text
   left-aligned. Don't spread it across the top. Brand: P&H / Type: Day tourer...". Each fact (a div.skp-spec from
   skp-core's article-fields.php) is ONE left-aligned line, the bold label, a colon, then the value, stacked one under
   another in the order given; a long value wraps back to the left edge. No columns at any width. The is-wide / is-long
   classes the PHP still adds are unused. The blue bar, white ground and type are as before. Without the cells (an older
   article-fields.php) the plain two-column list above still applies. */
.skp-specs dl:has(> .skp-spec) { display: block; }
.skp-specs .skp-spec { min-width: 0; margin: 0 0 5px; line-height: 1.4; }
.skp-specs .skp-spec:last-child { margin-bottom: 0; }
.skp-specs .skp-spec dt, .skp-specs .skp-spec dd { display: inline; margin: 0; }
.skp-specs .skp-spec dt::after { content: ":"; }
.skp-specs .skp-spec dd::before { content: " "; white-space: pre; }
.skp-specs .skp-specs-compare { margin: 12px 0 0; }

/* Sidebar modules */
.skp-widget { margin-bottom: 30px; }
.skp-widget h3 { background: var(--skp-blue); color: #fff; font-size: 20px; padding: 5px 15px; border-top-right-radius: 9px; }
.skp-widget ul { list-style: none; margin: 0; padding: 0; }
.skp-widget li a { display: block; background: #fff; padding: 7px 15px; text-decoration: none; border-top: 1px solid #ECECEC; line-height: 1.2; font-size: 15px; font-weight: 300; }
.skp-widget li a:hover { background: var(--skp-red-2); color: #fff; }
.skp-widget .skp-finder-cta { background: var(--skp-deep); color: #fff; padding: 16px; }
.skp-widget .skp-finder-cta p { color: #fff; font-size: 15px; }

/* ---- Newsletter row ---- */
.skp-newsletter { background: var(--skp-blue-2); padding: 32px 0; text-align: center; }
.skp-newsletter p { color: #fff; font-size: 26px; font-weight: 400; margin: 0; }
.skp-newsletter a.skp-nl-link { display: inline-block; color: #fff; background: var(--skp-red-2); text-decoration: none; padding: 5px 14px 8px; border-radius: 7px; margin-top: 14px; font-size: 17px; }
.skp-newsletter a.skp-nl-link:hover { background: #fff; color: var(--skp-blue-2); }
/* The signup form (8 Nov 2026, skp-core inc/newsletter.php): field and button on one line at every width (320px leaves
   the field about 190px). States come from data-state on the form: "ok" after a signup, "error" for a problem. */
.skp-newsletter { scroll-margin-top: 16px; }
.skp-nl-form { max-width: 480px; margin: 16px auto 0; }
.skp-nl-row { display: flex; gap: 8px; }
.skp-nl-row input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 2px solid #fff; border-radius: 7px; background: #fff; color: var(--skp-text); font: inherit; font-size: 17px; }
.skp-nl-row input::placeholder { color: #6b6b6b; opacity: 1; }
.skp-nl-row input[aria-invalid="true"] { border-color: var(--skp-red-2); }
.skp-nl-row button { flex: 0 0 auto; height: 44px; padding: 0 18px; border: 0; border-radius: 7px; background: var(--skp-red-2); color: #fff; font: inherit; font-size: 17px; cursor: pointer; }
.skp-nl-row button:hover { background: #fff; color: var(--skp-blue-2); }
.skp-nl-row input:focus-visible, .skp-nl-row button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.skp-nl-row button:disabled { opacity: .7; cursor: progress; }
.skp-newsletter .skp-nl-msg { margin: 12px 0 0; font-size: 17px; line-height: 1.4; }
.skp-newsletter .skp-nl-msg:empty { margin: 0; }
.skp-nl-form[data-state="ok"] .skp-nl-msg { font-weight: 600; }
.skp-nl-form[data-state="error"] .skp-nl-msg { display: inline-block; background: #fff; color: #B3121F; padding: 4px 12px; border-radius: 6px; font-weight: 600; }
.skp-newsletter .skp-nl-note { margin: 10px 0 0; font-size: 13px; opacity: .9; }
.skp-newsletter .skp-nl-note a { color: #fff; white-space: nowrap; }
.skp-nl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer (#footer, #legal) ---- */
.skp-footer { background: var(--skp-red); padding: 50px 0; color: #fff; }
.skp-footer .container { display: flex; justify-content: space-between; gap: 30px; }
.skp-footer img { width: 130px; display: block; margin-bottom: 12px; }
.skp-footer .skp-social a:hover { color: var(--skp-blue); }
.skp-footer .skp-social svg { width: 24px; height: 24px; }
.skp-footer h3 { color: #fff; font-size: 24px; margin-bottom: 14px; }
.skp-footer ul.menu { list-style: none; margin: 0; padding: 0; }
.skp-footer ul.menu a { color: #fff; text-decoration: none; font-size: 16px; }
.skp-footer ul.menu a:hover { color: var(--skp-blue); }
.skp-legal { background: var(--skp-grey-dark); color: #fff; padding: 10px 0; text-align: center; }
.skp-legal p { color: #fff; margin: 0; font-size: 12px; text-transform: uppercase; }
.skp-legal a { color: #fff; text-decoration: none; }
.skp-legal a:hover { color: var(--skp-red-2); }

/* ---- Search form ---- */
.skp-searchform { display: flex; gap: 6px; max-width: 420px; }
.skp-searchform input[type=search] { flex: 1; padding: 8px 10px; border: 1px solid #bbb; font-size: 16px; }
.skp-searchform button { background: var(--skp-red-2); color: #fff; border: 0; padding: 8px 14px; cursor: pointer; }

/* ---- Buyers guide finder (2 Nov 2026): a sidebar on the right, as the site's other sidebars; flat chips like the
   card tags; the count, applied filters and sort above the grid; results as you tap, no Show results button. ---- */
.skp-finder { display: flex; gap: var(--skp-aside-gap); align-items: flex-start; }
.skp-finder-results { flex: 1 1 70%; min-width: 0; order: 1; container-type: inline-size; } /* the grid counts columns from its own width */
.skp-finder-aside { flex: 0 0 var(--skp-aside); min-width: 0; order: 2; margin: 0; position: sticky; top: 12px; }
/* 1320px layout: two cards to a row, three once the results are 840px wide (screens from about 1200px, cards 260px
   or more); the 1320px container keeps it at three. One card on phones (max-width: 767px below). */
.skp-finder-results .skp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 840px) { .skp-finder-results .skp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.skp-filter-toggle { width: 100%; text-align: left; background: var(--skp-blue); color: #fff; border: 0; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; cursor: default; font: inherit; border-top-right-radius: 9px; }
.skp-filter-toggle span { font-size: 14px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.skp-filter-toggle svg { width: 20px; height: 20px; display: none; transition: transform .2s; }
.skp-filter-toggle.open svg { transform: rotate(180deg); }
.skp-filter-panel { background: #fff; border: 1px solid #ddd; border-top: 0; padding: 14px 16px 10px; border-radius: 0 0 9px 9px; } /* the cards' rounded bottom */
.skp-seg { display: flex; flex-direction: column; border: 1px solid var(--skp-line); margin-bottom: 12px; border-radius: 6px; overflow: hidden; }
.skp-seg label, .skp-chip { position: relative; cursor: pointer; }
.skp-seg label { display: block; }
.skp-seg input, .skp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.skp-seg .skp-chip span { display: flex; width: 100%; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: #fff; color: var(--skp-blue); transition: background .12s, color .12s; }
.skp-seg label + label span { border-top: 1px solid var(--skp-line); }
.skp-seg .skp-chip span:hover { color: var(--skp-red); }
.skp-seg .skp-chip input:checked + span { background: var(--skp-blue); color: #fff; }
.skp-seg input:focus-visible + span, .skp-chip input:focus-visible + span { outline: 2px solid var(--skp-red); outline-offset: -2px; }
.skp-seg .n, .skp-chip .n { font-weight: 400; font-size: 12px; opacity: .6; letter-spacing: 0; }
.skp-fsearch { display: flex; align-items: center; border: 1px solid #ccc; margin-bottom: 16px; border-radius: 6px; }
.skp-fsearch svg { width: 17px; height: 17px; margin-left: 10px; color: var(--skp-blue); flex: 0 0 auto; }
.skp-fsearch input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; padding: 0 10px; font-size: 15px; font-family: inherit; color: var(--skp-text); }
.skp-fsearch:focus-within { outline: 2px solid var(--skp-blue); outline-offset: -1px; border-radius: 6px; }
.skp-fsearch input:focus { outline: none; }
.skp-fsearch input::placeholder { color: #8a8a8a; }
.skp-frow { margin-bottom: 14px; }
.skp-flabel { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--skp-blue); font-weight: 600; margin: 0 0 6px; }
.skp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.skp-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13.5px; background: var(--skp-grey-bg); color: var(--skp-text); white-space: nowrap; border-radius: 6px; transition: background .12s, color .12s; }
.skp-chip span:hover { color: var(--skp-red); }
.skp-chip input:checked + span { background: var(--skp-blue); color: #fff; font-weight: 600; }
.skp-chip.none span { opacity: .4; }
.skp-fapplied { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin: 0 0 14px; min-height: 32px; }
.skp-fcount { font-size: 15px; font-weight: 600; color: var(--skp-blue); margin-right: 2px; }
.skp-fchips { display: contents; }
.skp-fapp { display: inline-block; border: 0; background: #fff; padding: 5px 10px; font-size: 13px; border-radius: 6px; font-family: inherit; cursor: pointer; color: var(--skp-text); text-decoration: none; }
.skp-fapp::after { content: " \00d7"; color: var(--skp-red); font-weight: 700; }
.skp-fapp:hover { color: var(--skp-red); }
.skp-fclear { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--skp-red); }
.skp-fclear:hover { color: var(--skp-blue); }
.skp-fsort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--skp-blue); font-weight: 600; }
.skp-fsort select { border: 1px solid #ccc; height: 32px; border-radius: 6px; padding: 0 34px 0 10px; font-size: 14px; font-family: inherit; color: var(--skp-text); text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer;
  -webkit-appearance: none; appearance: none; /* the browser's arrow sits hard against the edge (Owen, 2 Nov): our own chevron, set in */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23134584' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center / 14px 14px; }
.skp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skp-empty { background: #fff; padding: 30px; text-align: center; border-radius: 9px; }

/* ---- Articles listing (5 Nov 2026): advice, reviews and buyers guides together; the type filter across the top ---- */
/* The title keeps .skp-page-title's 22px gap: no intro line under it since 11 Nov 2026 (Phil, round 1) */
.skp-types { margin: 0 0 22px; }
.skp-types ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.skp-types a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px; background: #fff; color: var(--skp-blue); text-decoration: none; font-size: 15px; text-transform: uppercase; transition: background-color .15s, color .15s; }
.skp-types a .n { font-weight: 400; font-size: 12px; opacity: .6; }
.skp-types a:hover { color: var(--skp-red); background: #FCE8EA; }
.skp-types a[aria-current="page"] { background: var(--skp-blue); color: #fff; }
.skp-types a[aria-current="page"] .n { opacity: .8; }
.skp-types a:focus-visible { outline: 2px solid var(--skp-red); outline-offset: 2px; }
.skp-fcount:focus { outline: none; }
.skp-articles[aria-busy="true"] .skp-finder-results { opacity: .55; transition: opacity .15s .1s; }
.skp-pagination li > a.page-numbers:focus-visible { outline: 2px solid var(--skp-red); outline-offset: 2px; }
/* Its cards (6 Nov, Owen: back to the finder's style): the .skp-card above, image on top, copy underneath, white and blue
   alternating, two to a row (.skp-finder-results .skp-grid), one on phones. The brand, type and price line as the finder
   had it. Scoped to the articles grid, so the home page cards and the News list are untouched. */
.skp-article-grid .skp-card .skp-facts { padding: 0 10px 8px; font-size: 14px; color: #555; margin: 0; }
.skp-article-grid .skp-card:nth-child(even) .skp-facts { color: #dfe6f1; }
.skp-article-grid .skp-card .skp-price { color: var(--skp-red); font-weight: 600; white-space: nowrap; }
.skp-article-grid .skp-card:nth-child(even) .skp-price { color: #fff; }
.skp-article-grid .skp-card h3 a:focus-visible { outline-offset: 1px; }
.skp-article-grid .skp-card:nth-child(even) h3 a:focus-visible { outline-color: #fff; }

/* ---- Wide layout (7 Nov 2026) ---- */
/* Category, tag and search lists: two to a row once a row would be too long to read */
.skp-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(20px, 2.2vw, 36px); }
@media (min-width: 1200px) {
  .skp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skp-list .skp-list-item .skp-list-img { flex-basis: 34%; }
}
/* Home: four cards to a row on large screens (the 12 latest make three full rows); the lead photo a little shallower */
@media (min-width: 1360px) {
  .skp-main > .container > .skp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .skp-lead .skp-lead-img { flex-basis: 60%; }
  .skp-lead .skp-lead-img img { aspect-ratio: 16 / 9; }
  .skp-lead .skp-lead-body { padding: 48px 36px 30px; }
  .skp-lead h2 { font-size: 36px; }
  .skp-lead p { font-size: 18px; }
}
/* Single article on big screens: the photo fills the column (so the credit under it lines up), never taller than most
   of the screen (a 4:3 photo loses a sliver top and bottom on a short window). At a glance no longer floats here: it
   spans the column above the text at every width (12 Nov 2026) */
@media (min-width: 1100px) {
  .skp-article .skp-hero img { width: 100%; height: auto; max-height: min(78vh, 760px); object-fit: cover; }
  /* 18px text on big screens: about 74 characters a line in the 640px measure (17px gave 79); single articles use 800px (7 Nov) */
  .skp-article .skp-body > :is(p, ul, ol), .skp-article .skp-body > :is(ul, ol) li { font-size: 18px; }
}

/* ---- Responsive (from the max-width: 767px block) ---- */
@media (max-width: 900px) {
  .skp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skp-finder { flex-direction: column; }
  .skp-finder-aside { order: 0; width: 100%; flex-basis: auto; position: static; }
  .skp-finder-results { width: 100%; flex-basis: auto; } /* a size container has no content width: without this it shrinks to 0 */
  .skp-filter-toggle { cursor: pointer; }
  .skp-filter-toggle svg { display: block; }
  .skp-filter-panel.is-collapsed { display: none; }
}
@media (max-width: 767px) {
  .skp-nav { display: none; }
  .skp-menu-toggle { display: block; }
  .skp-social-head { display: none; }
  .skp-logo { width: 112px; margin-left: 1%; padding: 12px 0 10px; }
  .skp-header-right { align-self: center; padding-bottom: 0; }
  .skp-topbar { padding: 7px 0 6px; }
  .skp-topbar p { font-size: 11px; letter-spacing: .16em; }
  .skp-columns { flex-direction: column; }
  .skp-sidebar { width: 100%; }
  .skp-grid, .skp-finder-results .skp-grid { grid-template-columns: 1fr; }
  .skp-fsort { margin-left: 0; width: 100%; }
  .skp-fsort select { flex: 1; }
  /* Four type chips in a tidy 2 x 2 rather than three and an orphan */
  .skp-types ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .skp-types a { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 14px; }
  .skp-lead { flex-direction: column; }
  .skp-lead .skp-lead-body { padding: 18px; }
  .skp-list-item .skp-list-img { flex-basis: 34%; }
  .skp-list-item .skp-list-body { padding: 0 12px 12px; }
  .skp-list-item h2 { font-size: 19px; }
  .skp-footer { padding: 30px 0; text-align: center; }
  .skp-footer .container { flex-direction: column; align-items: center; }
  .skp-footer .skp-social { justify-content: center; }
  .skp-article h1 { font-size: 30px; }
  p, ol, ul { font-size: 16px; }
}

/* Phones: the top strip keeps the strapline only, on one line */
@media (max-width: 600px) {
  .skp-topbar-topics { display: none; }
}

/* "Red underline" heading style (6 Nov 2026): the short red bar under the About and Contact titles, as a block style any
   heading can take (block editor: select a heading, Styles, Red underline). Registered in functions.php. */
.wp-block-heading.is-style-skp-underline::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--skp-red); margin-top: 12px; }
.wp-block-heading.is-style-skp-underline.has-text-align-center::after { margin-left: auto; margin-right: auto; }