/*
Theme Name: Custom Theme
Description: A custom WordPress theme
Version: 2.21.1
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-theme
Tags: custom-theme, flexible, modern
*/

/*
Changelog
2.21.1 - Added a pure-CSS animated "shooting streak" over the mobile hero's
         bottom border: a `.hero-header-bg::after` inside the ≤992px query,
         positioned to sit exactly on the `::before`'s 3px border-bottom line
         (top:297px, matching the ::before's border-box height), an
         orange (var(--accent)) gradient streak animated left-to-right via
         background-position only (css/header.css). Hides under
         prefers-reduced-motion and alongside the existing mobile-hero-hide
         option (functions.php ksm_mobile_featured_image_css now also hides
         ::after). Also fixed the individual-CSS-mode enqueues (dev mode) in
         inc/class-css-combiner.php: ksm-style/ksm-header/ksm-custom now
         version on filemtime() (falling back to the theme version) instead
         of a hard-coded 1.0.0, matching the combined-mode branch.
2.21.0 - Added the Image strip: a per-post "Show image strip" checkbox plus 6 image
         slots (inc/image-strip.php), registered as the orderable `image_strip`
         section (inc/sections.php) with a default position first in the stack, i.e.
         directly under the hero, movable per post via the Section Order box. Plain
         images, no lightbox, sized with a new uncropped `ksm-strip-thumb` image
         size (functions.php) and laid out with a 6-across/3-across grid
         (css/custom.css), matching the westgtamasonry pattern. Outputs nothing at
         all unless ticked and at least one valid image is set.
2.20.0 - Set font-display to 'block' now that the font preload is in place, which
         measured level with 'swap' on the homepage and far better on a deep /in/
         page, with no period of invisible text. The preload must stay: 'block'
         depends on it. Also made the global h1 size control reach the search
         results and work archive headings, which the theme's text-size utility
         classes had been overriding; the hero heading keeps its own dedicated
         control and is unchanged.
2.19.0 - Made the global colour controls outrank the theme's own descendant-scoped
         colour rules, so a colour chosen in Appearance > Fonts now wins on
         paragraphs inside a step block, on headings inside post content, inside a
         content box and inside the related-posts strip. Each control was widened
         only as far as its own competitor required, and no rule uses !important.
         The size controls were deliberately left alone, so the existing text-size
         utility classes still behave exactly as they did. The hero heading and
         hero description controls remain authoritative for the hero. Also fixed a
         fault in the settings save handler that could blank stored settings -- a
         submission that did not carry every field used to wipe the fields it
         omitted, which is what emptied the saved font families; a field that is
         not submitted is now left untouched.
2.18.0 - Gave the hero its own size controls and added a colour control beside
         every size control. The hero heading and the hero description can now be
         sized on their own, separately from the site-wide headings and
         paragraphs, so choosing a hero size no longer means fighting the
         heading sizes used everywhere else. Alongside each of the eight size
         fields there is now a colour field, taking a hex colour such as #1a1a1a,
         and each colour is applied to exactly the same elements as the size
         beside it. Every field is still optional: leaving one empty adds no rule
         at all and the theme stylesheet keeps control, and nothing anywhere uses
         !important. A colour picker is offered where JavaScript is available, but
         each colour field is an ordinary text box that works without it. An
         entry that is not a valid size or colour is refused, the previous value
         is kept and a message says which field was rejected and why.
2.17.0 - Added a search box to the hand-picked list in the Custom Related Posts
         panel, so a page can be found by typing instead of scrolling several
         hundred rows. Filtering happens in the browser against the list already
         on the page, so there is no extra request and nothing new to attack. A
         live count reads "Showing X of Y, Z selected" and a Clear button
         restores the whole list. Pages you have already chosen are pinned in
         their own group at the top and are never filtered out, so searching can
         never quietly drop a selection when the page is saved. The search box,
         the count and the Clear button are all created by JavaScript, so with
         JavaScript switched off the panel behaves exactly as it did before, with
         no controls that do nothing.
2.16.0 - Made the global text size controls actually take effect. The size rules
         are now attached to the last theme stylesheet instead of being printed
         ahead of it, so an entered size overrides the theme's own heading sizes
         rather than losing to them; no !important is used anywhere. Fonts now
         load with font-display: swap instead of block, and the two faces the
         page actually renders are preloaded, which removes most of the layout
         shift caused by font loading. The preloads are worked out from the
         selected body and heading families, so changing a font in Appearance >
         Fonts moves them automatically. The two test fonts were archived.
2.15.0 - Added a font importer to Appearance > Fonts. A Google font can now be
         installed from the admin screen: the server downloads it at import time
         only, and the files are stored in wp-content/uploads and served from this
         site's own domain, so no rendered page ever calls Google. Only the latin
         subset is imported, which also stops two subsets of one family colliding
         in the font scanner. The font identifier is validated against the API's
         own list and the chosen weights against the ones that family offers; the
         archive is checked and extracted to a temporary folder before anything is
         moved into the fonts folder. The form works with JavaScript switched off.
2.14.0 - Reorganised the Appearance font page as a single Fonts section with four
         parts (add a font, font selection, text sizes, installed fonts), and added
         global text size controls for p and h1 to h5. A size field left empty emits
         no CSS rule at all, so the stylesheet keeps control. Sizes are validated
         against a documented CSS length grammar and refused if they do not match.
2.13.0 - Retired the hardcoded static Poppins block and enabled the custom fonts
         scanner (inc/custom-fonts.php), so every face in wp-content/uploads/fonts
         is served locally and the body and heading families are chosen from the
         Appearance pickers rather than being fixed in PHP.
*/

.bb0{fill-rule:evenodd;clip-rule:evenodd;fill:var(--contrast);}
	.bb1{fill-rule:evenodd;clip-rule:evenodd;fill:var(--primary);}
	.bb2{fill-rule:evenodd;clip-rule:evenodd;fill:#4D9C47;}
	.bb3{fill:var(--secondary);}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
  font-size: 62.5%;
}
body {
  font-size: clamp(1.6rem, 1.4667rem + 0.4267vw, 2rem);
}

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




:root {
	
	--primary: #0073aa;
	--secondary: #333333;
	--accent: #f39c12;
	--light: #ffffff;
	--dark: #222222;
	--contrast: #000000;
	--text-xs: 1rem;
	--text-s: 1.4rem;
	--text-m: 2rem;
	--text-l: clamp(2rem, 1.6667rem + 1.0667vw, 3rem);
	--text-xl: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
	--text-xxl: clamp(3rem, 1.9437rem + 3.3803vw, 4rem);
	--grid-gap: 1rem;
	--space-xs: 1rem;
	--space-s: 2rem;
	--space-m: 4rem;
	--space-l: 6rem;
	--space-xl: 8rem;
	--space-xxl: 10rem;
	
}



:where([class*="text--"],h1,h2,h3,h4,h5,h6).text--larger {
	font-size: calc(var(--text-size) * var(--text-multiplier));
}

h1 {
  font-size: var(--text-xxl);
  --text-size: var(--text-xxl);
  line-height: 1.2;
}
h2 {
  font-size: var(--text-xl);
	--text-size: var(--text-xl);
   line-height: 1.2;
}
h3 {
  font-size: var(--text-l);
	--text-size: var(--text-l);
}
h4 {
  font-size: var(--text-m);
--text-size: var(--text-m);
}

.text--xs {
	font-size: var(--text-xs);
	--text-size: var(--text-xs);
}
.text--s {
	font-size:  var(--text-s);
	--text-size: var(--text-s);
}
.text--m {
	font-size: var(--text-m);
	--text-size: var(--text-m);
}
.text--l {
	font-size: var(--text-l);
	--text-size: var(--text-l);
}
.text--xl {
	font-size: var(--text-xl);
	--text-size: var(--text-xl);
}
.text--xxl {
	font-size: var(--text-xxl);
	--text-size: var(--text-xxl);
  font-weight:800;
}
.text--hero {font-size: 4rem; font-weight:800;}

.text--light {
  color: var(--light);
}
.text--dark {
  color: var(--dark);
}
.font--thin {font-weight: 300; }
.font--thick {font-weight: 700;}
.text--primary {color:var(--primary);}
.text--secondary {color:var(--secondary);}
.text--accent {color:var(--accent);}
.text--xs {
  font-size:var(--text-xs);
}
.text-link--white a {color: var(--light) !important;}
.text-link--dark a {color: var(--dark);}
.link--accent-ultra-light {
  color: var(--accent-ultra-light);
}
.text-stroke-dark { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--dark);}
.text-stroke-light { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--light);}
.text-stroke-secondary { -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--secondary);}
.text-link--primary a {color: var(--primary);}
.text-link--primary {color: var(--primary);}
.text-link--secondary a {color: var(--secondary);}
.text-link--secondary {color: var(--secondary) !important;}
.text-uppercase { text-transform:uppercase;}
.gap-xs {gap: var(--space-xs);}
.callout-text {font-size:var(--text-m); font-weight:700;}
.text--primary {color: var(--primary); }
.text--secondary {color: var(--secondary); }
.text--accent {color: var(--accent); }
.link--white a {color: #fff !important; }
.link--white {color: #fff !important; }
.btn--primary {background-color: var(--primary); }
.btn--secondary {background-color: var(--secondary); }
.btn--accent {background-color: var(--accent); }
.center-content {margin-left:auto; margin-right:auto;}
.text-align {text-align:center;}
.set-width {width:1400px !important; max-width:100%;}
.set-width-1600 {width:1600px !important; max-width:100%;}
.set-height-600 {height:600px;}
.set-height-500 {height:500px;}
.set-height-400 {height:400px;}
.width--50 {width:50%;}
.width--80 {width:80%;}
.width--100 {width:100%;}
.background-primary {background-color: var(--primary); }
.background-secondary {background-color: var(--secondary); }
.background-accent {background-color: var(--accent); }
.background-contrast {background-color: var(--contrast); }
.background-white {background-color: var(--light); }
.margin-top--xs {margin-top:var(--space-xs); }
.margin-top--s {margin-top:var(--space-s); }
.margin-top--m {margin-top:var(--space-m); }
.margin-top--l {margin-top:var(--space-l); }
.margin-top--xl {margin-top:var(--space-xl); }
.margin-bottom--s {margin-bottom:var(--space-xs); }
.margin-bottom--s {margin-bottom:var(--space-s); }
.margin-bottom--m {margin-bottom:var(--space-m); }
.margin-bottom--l {margin-bottom:var(--space-l); }
.margin-bottom--xl {margin-bottom: var(--space-xl); }
.margin-middle--auto {margin-top:auto; margin-bottom:auto;}
.margin-center--auto {margin-left:auto; margin-right:auto;}
.gap--xs { gap:var(--space-xs);}
.gap--s { gap:var(--space-s); --grid-gap: var(--space-s); }
.gap--m { gap:var(--space-m); --grid-gap: var(--space-m); }
.gap--l { gap:var(--space-l); --grid-gap: var(--space-l); }
.gap--xl { gap:var(--space-xl); --grid-gap: var(--space-xl); }
.pad--xs { padding:var(--space-xs);}
.pad--s { padding:var(--space-s);}
.pad--m { padding:var(--space-m);}
.pad--l { padding:var(--space-l);}
.pad--xl { padding:var(--space-xl);}
.pad--top-m {padding-top:var(--space-m);}
.pad--bottom-m {padding-bottom:var(--space-m);}
.display-flex {display:flex;}
.display-block {display:block;}
.display-grid {display:grid;}
.display-inline {display:inline;}
.grid-3 {  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
.grid-4-mobile-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.grid-4-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem;
}
@media (max-width: 992px) {
  .grid-4 {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .grid-4-2 {
   grid-template-columns: repeat(2, 1fr);
     gap: 1rem
  }
}
.sticky {
  position: sticky;
	top:0;
}
.sticky-top--l {
  top: 10%;
}

.border-top-light { border-top: 1px solid var(--shade-ultra-light); } 
.border-bottom-light {border-bottom: 1px solid var(--shade-ultra-light); }
.border-primary {border:2px solid var(--primary);}
.border-secondary {border:2px solid var(--secondary);}
.border-light {border:2px solid var(--light);}
.border-secondary-top {border-top:2px solid var(--secondary);}
.border-dashed-light {border: 4px dashed var(--light);}
.circle {border-radius:200px;}
a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #005177;
}

img {
    max-width: 100%;
    height: auto;
}


.site-container {
    max-width: 100%;
    margin: 0 auto;
}


.site-header {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.site-branding {
    margin-bottom: 20px;
}

.site-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.site-title a {
    color: #333;
}

.site-description {
    font-size: 1rem;
    color: #666;
    margin: 5px 0 0;
}


.main-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.main-navigation a {
    color: #333;
    font-weight: 500;
}

.main-navigation a:hover {
    color: #0073aa;
}



.search-field {
  padding: 0.5rem;
}
.content-area {
    width: 100%;
}

article {
    margin-bottom: 40px;
}

.entry-header {
    margin-bottom: 20px;
}

.entry-title {
    font-size: 2rem;
    margin-bottom: 10px;
}

.entry-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 20px;
}

.entry-content {
    margin-bottom: 20px;
}
.ksm-block h2,
.ksm-block h3,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-bottom: 0.5em;
    margin-top:0.5em;
}

.entry-content p {
    margin-bottom: 1em;
}

.entry-footer {
    font-size: 0.875rem;
    color: #666;
    border-top: 1px solid #e5e5e5;
    padding-top: 15px;
}


.widget-area {
    margin-top: 40px;
}

.widget {
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.25rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
}

.widget ul {
    list-style: none;
}

.widget li {
    margin-bottom: 8px;
}


.site-footer {
    background-color: #333;
    color: #fff;
    padding: 30px 0;
    margin-top: 60px;
}

.site-footer a {
    color: #fff;
}

.site-info {
    text-align: center;
    font-size: 0.875rem;
}


.pagination {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
}

.page-numbers {
    padding: 8px 15px;
    background-color: #f5f5f5;
    border-radius: 3px;
}

.page-numbers.current {
    background-color: #0073aa;
    color: #fff;
}


.desktop_navigation {
    display: none;
}

.mobile-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (min-width: 993px) {
    .desktop_navigation {
        display: block;
    }
    
    .mobile-bar {
        display: none;
    }
    
    .mobile-only {
        display: none;
    }
}

@media (min-width: 768px) {
    .site-content.has-sidebar {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 40px;
    }
    
    .widget-area {
        margin-top: 0;
    }
}
/* Topic Index — [ksm_topic_index] shortcode (theme v2.8.0) */
.default_div_topic_index {
    margin-bottom: var(--space-m, 2rem);
}

.default_div_topic_index_town {
    margin-bottom: var(--space-m, 2rem);
}

.default_topic_index_town_title {
    border-bottom: 2px solid var(--primary);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

.default_div_topic_index_area {
    margin: 0.5rem 0 1rem 1rem;
}

.default_topic_index_area_title {
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.default_topic_index_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1rem;
}

.default_div_topic_index_item {
    margin: 0;
}

.default_topic_index_link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--secondary, inherit);
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.default_topic_index_link:hover,
.default_topic_index_link:focus-visible {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.default_topic_index_image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .default_topic_index_list {
        grid-template-columns: 1fr;
    }

    .default_div_topic_index_area {
        margin-left: 0.5rem;
    }
}