/* ==========================================================================
   JKC Inc. site template - css/template.css  (version 1.25)

   ONE uncompressed, hand-authored stylesheet. No SCSS, no .min.css, no build step.
   Rules: every value in a rule is a var(--token); literals live only in :root;
   media queries redefine tokens instead of overriding properties.
   The client's own one-off rules go in css/local.css (loaded after this file when
   it exists; never shipped in the package).

   SECTIONS (cascade order)
     1. Fonts
     2. Tokens
     3. Base
     4. Layout primitives
     5. Header (logo, header-top-right, social, search)
     6. Navigation, burger and drawer
     7. Toolbar
     8. Hero and Smart Slider caption
     9. Opt-in module classes (cards, feature boxes, sidebar boxes, reviews, footer blocks)
    10. Home sections
    11. Main and right rail
    12. Component output (articles, blogs, categories, ACF gallery, page classes)
    13. Footer
    14. System pages (error, offline, component)
    15. Responsive
    16. Motion

   Values come from the client's custom.scss, the live compiled CSS and, where only
   visible, the screenshots. Tokens that carry a client scale name (--fs-100 ... ) and
   are not used by this stylesheet are kept under their ORIGINAL names for later
   manual styling; tokens in use are named by role.
   ========================================================================== */

/* ==========================================================================
   1. FONTS   (self-hosted in ../fonts, nothing is requested from another site)
   Cinzel 400 (headings, menu) and Open Sans 300-600 (text, slider caption).
   Open Sans is one variable file, so the weight range is declared once per subset.
   @font-face descriptors cannot read custom properties, so they stay literal here.
   ========================================================================== */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cinzel-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: "Open Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/opensans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/opensans-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;
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
:root {
  /* ---- colour: brand (client names kept) ---- */
  --color-logo-red: #5B1300;
  --color-brown-light: #65594E;
  --color-brown-accent-light: #713517;
  --color-brown-accent-dark: #541B04;
  --color-brown-accent-med: #491B04;
  --color-background-gray-std: #E8EAED;
  --color-background-gray-light: #F8F8F9;
  --color-text-accent-green: #006428;
  --color-link: #ac4545;
  --color-black: black;
  --color-white: white;
  --color-button-blue: #0097CE;         /* unused here, kept for manual styles */
  --color-button-green: #51844B;        /* unused here, kept for manual styles */

  /* ---- colour: surfaces and text (live hydrogen_12.css) ---- */
  --color-page: #ffffff;
  --color-gray-subfeature: #f0f0f0;
  --color-hero: #354d59;
  --color-border-faint: rgba(0, 0, 0, 0.05);
  --color-border-input: #dddddd;
  --color-text: #666666;
  --color-heading: #4d4d4d;
  --color-text-header: #65594e;

  /* ---- colour: navigation ---- */
  --color-nav-bg: #564b3f;
  --color-nav-link: #ffffff;
  --color-nav-hover-bg: #443c32;
  --color-nav-active-bg: #ffffff;
  --color-nav-dropdown-bg: #443c32;
  --color-nav-dropdown-hover-bg: #393129;
  --color-nav-indicator: #bdb1a4;
  --color-nav-current-text: var(--color-logo-red);   /* proposed active state */
  --color-nav-current-bar: var(--color-logo-red);
  --color-nav-branch-bar: var(--color-nav-indicator);
  --color-focus-ring: #ffffff;           /* focus ring on the DARK surfaces (menu bar, drawer, hero slider): white */
  /* v1.25: global focus ring on the light page. --color-focus-ring is white and invisible on white; the ring colour here is the logo red
     (13.7:1 on white, 11.3:1 on the header grey #E8EAED). Dark surfaces switch the token back to the white ring (see .t-drawer, .t-hero__left). */
  --color-focus-page: var(--color-logo-red);
  --bw-focus: var(--bw-bar);
  --offset-focus: 2px;
  /* v1.25: inline links in running text (paragraphs, definitions, table cells, quotes, captions). The darkest sensible brand red = the logo red.
     Link vs the #666666 text around it = 2.38:1 (WCAG 1.4.1 asks 3:1 for colour alone), link on white = 13.7:1. Was #ac4545: 5.69:1 on white but
     1.01:1 against the text (same lightness, only the hue differs). Hover keeps the colour. */
  --color-link-inline: var(--color-logo-red);
  --color-link-inline-hover: var(--color-link-inline);
  --outline-programmatic: none;          /* v1.23: <main tabindex="-1"> (skip-link target) shows no focus ring */

  /* ---- colour: controls ---- */
  --color-search-btn: #398372;           /* v1.13: was #439a86 (white 3.38:1); same hue, darker: white 4.50:1. Hover and focus use the same colour */
  --color-search-btn-text: #ffffff;
  --color-readmore-bg: var(--color-nav-bg);               /* Our Services "Continue Reading": the menu bar brown (v1.8) */
  --color-readmore-text: var(--color-nav-link);           /* white on #564b3f = 8.5:1 */
  --color-readmore-hover-bg: var(--color-nav-hover-bg);   /* white on #443c32 = 10.8:1 */
  --color-readmore-focus: var(--color-brown-accent-dark);
  /* .btn-jkc (home slider buttons, v1.9): a lighter shade of the menu-bar brown = 85% menu brown + 15% white.
     White text on it = 5.6:1 (AA needs 4.5:1). Hover = the darker menu hover brown, 10.8:1. */
  --color-btn-jkc-bg: #6f665c;                                                       /* fallback = the same colour, for browsers without color-mix */
  --color-btn-jkc-bg: color-mix(in srgb, var(--color-nav-bg) 85%, var(--color-white));
  --color-btn-jkc-text: var(--color-white);
  --color-btn-jkc-hover-bg: var(--color-nav-hover-bg);
  --color-btn-jkc-ring: var(--color-white);
  --color-btn-jkc-edge: var(--color-black);
  --color-social-box: var(--color-logo-red);              /* v1.15: was --color-brown-accent-light; #5B1300 */
  --color-social-glyph: #ffffff;
  --color-social-basic: var(--color-logo-red);            /* footer icons, #5B1300 on white = 13.7:1 */
  --color-social-hover-bg: var(--color-white);            /* boxed hover: inverts, the box edge stays red */
  --color-social-hover-glyph: var(--color-logo-red);
  --color-scrim: #000000;

  /* ---- colour: Smart Slider caption (new in v1.0) ---- */
  --color-slide-caption-bg: rgba(0, 0, 0, 0.5);   /* v1.11: 0.5 = the live original (v1.0 0.2, v1.1-1.10 0.3 looked too light) */
  --color-slide-caption-text: #ffffff;

  /* ---- colour: review widget (third-party embed; wrapper only) ---- */
  --color-review-panel-bg: #f7f7f7;

  /* ---- fonts ---- */
  --font-head: "Cinzel", Times, serif;
  --font-body: "Open Sans", Helvetica, Arial, sans-serif;

  /* ---- font sizes by role (client scale step in comment) ---- */
  --fs-root: 100%;
  --fs-body: 1.2rem;             /* was fs-500 */
  --fs-text: 1rem;               /* was fs-400 */
  --fs-small: 0.8rem;            /* was fs-300 (nav, small print) */
  --fs-h1: 2.2rem;               /* was fs-1000 */
  --fs-h2: 1.9rem;               /* theme h2 */
  --fs-h3: 1.5rem;               /* theme h3 */
  --fs-h4: 1.15rem;              /* theme h4 */
  --fs-title-box: 1.8rem;        /* was fs-800 (feature box title, sidebar phone) */
  --fs-title-box-side: 1.6rem;   /* was fs-700 */
  --fs-title-blog: 1.4rem;       /* was fs-600 */
  --fs-phone-feature: 2.2rem;    /* was fs-1000 */
  --fs-social: 0.95rem;
  --fs-burger: 1.5rem;
  --fs-drawer-close: 2rem;       /* v1.25: the x of the drawer's Close button */
  --fs-error-code: 5rem;
  --fs-slide-title: 322.5%;      /* Smart Slider base is relative: live 268.75% + 20% */
  --fs-slide-text: 127%;         /* live 112.5% + about 13% */
  --fs-heading-small: 60%;       /* <small> inside any heading: 60% of that heading's size (v1.9; 40% in v1.8; the old site used a fixed 0.875rem) */
  --fs-chevron: 50%;             /* the chevron in Joomla's Read more button: half the text size (v1.9) */
  --fs-btn-jkc: 0.95rem;
  --h-btn-jkc: 2.25rem;
  --space-btn-jkc-x: 1.25rem;
  --ls-btn-jkc: 0.05em;

  /* ---- unused client scale (original names kept) ---- */
  --fs-100: 0.4rem;
  --fs-125: 0.4rem;
  --fs-150: 0.5rem;
  --fs-200: 0.6rem;
  --fs-250: 0.7rem;
  --fs-350: 0.9rem;
  --fs-900: 2.0rem;
  --fs-1200: 2.4rem;
  --fs-1400: 2.6rem;
  --fs-1600: 2.8rem;
  --fs-2000: 3.0rem;

  /* ---- line heights ---- */
  --flh-body: 1.6rem;            /* body text; was flh-500 = 1.4rem until v1.7. Headings no longer use it (v1.8) */
  --flh-callout: 1.4rem;         /* single-line callouts (phone, e-mail, tagline): the old body value, kept so they do not move when --flh-body changes */
  --flh-control: 1.2rem;         /* was flh-400 (inputs, buttons) */
  --flh-text: 1.8rem;
  --flh-title-box: 2.2rem;
  --flh-title-blog: 1.8rem;
  --flh-menu-item: 2.2rem;
  --flh-phone-feature: 2.4rem;
  --flh-nav: 1.4rem;
  --flh-tight: 1.2;
  --flh-solid: 1;

  /* heading line heights, one per level (v1.8). Unitless = a multiple of that heading's own font size, so the
     line height follows the size (also where --fs-h1 shrinks on phones). 1.25-1.3 = snug but not tight.
     Tune here; 1.2 is tight, 1.4 airy. */
  --flh-heading-1: 1.25;
  --flh-heading-2: 1.25;
  --flh-heading-3: 1.3;
  --flh-heading-4: 1.3;
  --flh-heading-5: 1.3;
  --flh-heading-6: 1.3;

  /* unused client scale (original names kept) */
  --flh-100: 0.6rem;
  --flh-200: 0.8rem;
  --flh-300: 1.0rem;
  --flh-600: 1.6rem;
  --flh-700: 1.8rem;
  --flh-900: 2.2rem;

  /* ---- weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-slide-title: 700;         /* live 600, heavier by request */
  --fw-slide-text: 500;          /* live 400, slightly heavier by request */

  --fw-900: 900;                 /* used only to select Font Awesome's solid set (tagline arrows) */

  /* unused client scale (original names kept) */
  --fw-100: 100;
  --fw-200: 200;

  /* ---- radii ---- */
  --br-large: 8px;               /* unused, original name kept */
  --br-social: 3px;
  --br-round: 50%;
  --br-none: 0;

  /* ---- borders ---- */
  --bw-hairline: 1px;
  --bw-bar: 3px;

  /* ---- spacing ---- */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-block: 1.563rem;
  --space-section: 1.5rem;
  --space-subshowcase: 1rem;
  --space-nav-y: 0.4rem;
  --space-nav-x: 0.8rem;
  --space-dropdown-y: 0.78rem;
  --space-dropdown-x: 1rem;
  --space-grid-gap: 1vw;
  --space-toolbar-x: 1.5vw;
  --space-social-pad: 0.3rem;
  --space-social-gap: 0.5rem;
  --space-hero-left: 2vw;
  --space-hero-right: 1vw;
  --space-heading-before: 0.75rem;
  --space-heading-after: 1.5rem;
  --space-p-after: 1.5rem;
  --space-blog-title-top: 3rem;
  --space-list-indent: 1.5rem;
  --space-footer-menu-gap: 1vw;
  --space-footer-menu-item: 0.5rem;
  --space-slide-caption: 10px;
  --offset-skip-link: -4rem;               /* v1.24: the skip link waits this far above the window until it is focused (was a literal in the rule) */
  --space-hero-right-lead: 0.5vw;          /* v1.24: left margin of the hero's right column (was a literal) */
  --space-gq-card-left: 1vw;               /* v1.24: left padding of a compact review card (was a literal) */
  --space-gq-meta-left: 0.5vw;             /* v1.24: left margin of a compact review's meta line (was a literal) */

  /* ---- layout ---- */
  --w-container: 75rem;
  --w-70: 70%;
  --w-30: 30%;
  --w-67: 67%;
  --w-33: 33%;
  --w-50: 50%;
  --w-25: 25%;
  --w-third: 33.3333%;
  --w-hero-right-max: 25vw;
  --w-logo: 149px;               /* the logo picture's real size is 149 x 98: the largest it can be shown without blur */
  --w-logo-compact: 56px;        /* logo width once the page is scrolled (v1.9) */
  --w-search-input: 9.5rem;

  /* ---- sticky header (v1.9, option A: two bars, tightened, slimmer when scrolled) ---- */
  --space-header-y: 0.5rem;      /* space above and below the logo (was 1.563rem) */
  --space-header-y-compact: 0.25rem;
  --space-header-x: var(--space-block);
  --h-top-full: 9.5rem;          /* fallback; js/template.js measures the real heights and sets these */
  --h-top-compact: 5rem;
  --h-top-now: var(--h-top-full);
  /* stacking order, lowest to highest (v1.10). The footer map column (.t-footer__map) is one stacking context at --z-map, so
     Leaflet's own layers (up to ~1000) can never rise above the sticky header, whatever map module is in footer-map (v1.24). */
  --z-map: 1;
  --z-nav: 2;                    /* inside .t-top */
  --z-header: 3;                 /* inside .t-top */
  --z-dropdown: 10;              /* inside .t-top */
  --z-burger: 20;                /* inside .t-top */
  --z-top: 20;                   /* the sticky header + menu: above page content and the map, below the scrim and the drawer */
  --z-scrim: 25;
  --z-drawer: 30;
  --z-skip: 100;
  --bp-drawer: 47.99rem;         /* read by js/template.js: below this width the burger exists (keep equal to the media query in section 15) */
  --shadow-top: 0 2px 6px rgba(0, 0, 0, 0.2);
  --display-header: block;       /* phones: flex (burger, logo, search in one row) */
  --space-header-edge: 0;
  --wrap-header: wrap;
  --flex-header-logo: 0 0 30%;
  --flex-header-right: 0 0 70%;
  --position-burger: absolute;
  --w-header-social: none;       /* phones, scrolled: social icons collapse to nothing */
  --h-header-social: none;
  --vis-header-social: visible;
  --overflow-header-social: visible;   /* v1.24: hidden only while folded away, so the icons' focus rings are never clipped at the top of the page */
  --w-dropdown: 20rem;
  --w-drawer: 17rem;
  --w-slide-caption: 98%;
  --w-article-float: 50%;
  --w-process-float: 48%;
  --w-portfolio-item: 45%;
  --space-portfolio-item: 1rem;   /* v1.20: space under each item (picture to the next row's title); was 30px + 2vw row gap - the picture's overflow, which came to about 1rem at desktop width */
  --space-portfolio-above: 1.5rem;   /* v1.22: padding above each category title (new); about 47px from the previous picture to the title text vs 15px below it, about 3x */
  --cols-portfolio: 2;
  --space-portfolio-title: 0.5rem;   /* v1.21: space between title and picture; was 0.75rem (12px). Visible gap = this + the title's line-height spare (about 7px): 19px -> 15px, about -20% */
  --space-component-x: 0.75rem;
  --cols-gallery: 2;
  --gap-gallery: 10px;
  --portfolio-gap: 2vw;
  --w-staff-photo: 12vw;
  --w-staff-figure: 15vw;
  --w-staff-text: 24vw;

  /* ---- switches redefined by media queries ---- */
  --display-nav: flex;
  --text-align-small: left;
  --text-align-toolbar-right: right;
  --text-align-footer: left;
  --justify-footer-social: flex-end;   /* footer-tag-right icons: right-justified; centred on phones (media query) */
  --justify-header: flex-end;
  --align-logo: left;

  /* ---- shadows / motion ---- */
  --shadow-card: 1px 1px 1px rgba(0, 0, 0, 0.1);
  --shadow-drawer: 0 0 1rem rgba(0, 0, 0, 0.4);
  --transition: 0.2s ease-out;
  --opacity-solid: 1;
  --color-rule: #F0F2F4;
  --bw-rule: 4px;
  --space-figure-x: 40px;
  --space-tagline-arrow: 0.3em;
  --fs-tagline-arrow: 1em;

  /* ---- Portfolio sub-category: clickable title and "View photos" bar (v1.19) ---- */
  --color-portfolio-title-hover: var(--color-brown-accent-dark);   /* link colour #ac4545 -> #541B04 */
  --color-portfolio-focus: var(--color-readmore-focus);            /* --color-focus-ring is white (for the dark menu), invisible on the white page */
  --color-portfolio-bar-bg: rgba(84, 27, 4, 0.85);                 /* #541B04 at 85%: white text is 8.9:1 even over a pure white photo (13.7:1 on the solid colour) */
  --color-portfolio-bar-hover-bg: #491b04;
  --color-portfolio-bar-text: #ffffff;
  --bw-portfolio-underline: var(--bw-hairline);
  --offset-portfolio-underline: 0.2em;
  --space-portfolio-arrow: 0.35em;
  --content-portfolio-arrow: "\2192";
  --fs-portfolio-bar: 1rem;
  --flh-portfolio-bar: 1.4;
  --ls-portfolio-bar: 0.05em;
  --space-portfolio-bar-y: 0.75rem;
  --space-portfolio-bar-x: var(--space-m);
}

/* ==========================================================================
   3. BASE   (what nucleus / bootstrap reboot supplied on the Gantry site)
   ========================================================================== */
html { font-size: var(--fs-root); box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--flh-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; border: 0; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link); }
/* v1.25 inline links: links inside running text get the darker --color-link-inline, so they stand out from the #666 text around them
   (the old link colour had the same lightness as the text). Scoped to text containers of the content areas; link lists, menus, buttons
   (.btn-jkc, Bootstrap .btn: their own class rules win) and the dark hero are not touched. :where() keeps the specificity of a plain
   "a", so this sits after the base rules and any class rule still wins. */
:where(.t-component, .t-sidebar, .t-subshowcase, .t-feature, .t-subfeature, .t-footer) :where(p, dd, td, blockquote, figcaption) a { color: var(--color-link-inline); }
:where(.t-component, .t-sidebar, .t-subshowcase, .t-feature, .t-subfeature, .t-footer) :where(p, dd, td, blockquote, figcaption) a:hover { color: var(--color-link-inline-hover); }
/* v1.25 global focus ring for links, buttons and form controls on the light page. :where() = zero specificity, so every designed ring
   (menu bar, .btn-jkc, portfolio, social icons, drawer) and Bootstrap's own form-control focus still win. Dark surfaces redefine the token. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--bw-focus) solid var(--color-focus-page); outline-offset: var(--offset-focus);
}
.t-hero__left { --color-focus-page: var(--color-focus-ring); }   /* the slider sits on dark photos: white ring (the reviews panel on the right is light and keeps the red) */
h1, h2, h3, h4, h5, h6 {
  margin: var(--space-heading-before) 0 var(--space-heading-after);
  color: var(--color-heading);
  font-family: var(--font-head);
  font-weight: var(--fw-medium);
}
h1 { font-size: var(--fs-h1); line-height: var(--flh-heading-1); }
h2 { font-size: var(--fs-h2); line-height: var(--flh-heading-2); }
h3 { font-size: var(--fs-h3); line-height: var(--flh-heading-3); }
h4 { font-size: var(--fs-h4); line-height: var(--flh-heading-4); }
h5 { line-height: var(--flh-heading-5); }
h6 { line-height: var(--flh-heading-6); }
/* <small> inside a heading (for example the "(as voted by ...)" lines on Our Awards): 60% of the heading's size */
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: var(--fs-heading-small); }
strong { color: var(--color-heading); font-weight: var(--fw-bold); }
p { margin: var(--space-p-after) 0; }
ul, ol { margin-top: var(--space-p-after); margin-bottom: var(--space-p-after); }
ul { margin-left: var(--space-list-indent); padding: 0; }
ol { padding-left: var(--space-list-indent); }
figure { margin: var(--space-m) var(--space-figure-x); }   /* nucleus: 1em 40px (measured on the original cards) */
/* hydrogen: hr is a 4px light bar (#F0F2F4), measured in the original screenshot; Bootstrap's hr is reset */
hr { margin: var(--space-p-after) 0; border: 0; border-bottom: var(--bw-rule) solid var(--color-rule); height: 0; opacity: var(--opacity-solid); }
/* Bootstrap 5 is loaded (Joomla's own copy) and makes ul.nav a flex row with no bullets. Joomla's
   menu lists carry .nav, so every menu list is reset to a plain bulleted list here; the main menu,
   footer menu, sidebar boxes and footer link lists then restyle it with higher-specificity rules. */
.mod-menu { display: block; list-style: disc; }
.mod-menu li { margin: 0; }
label, input, button, select, textarea {
  font-size: var(--fs-text);
  font-weight: var(--fw-medium);
  line-height: var(--flh-control);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-s); top: var(--offset-skip-link); z-index: var(--z-skip);
  padding: var(--space-s) var(--space-m); background: var(--color-page); color: var(--color-link);
}
.skip-link:focus { top: var(--space-s); }
/* <main tabindex="-1"> is the skip link's target (it takes focus only from the link or from script): no ring on that container (v1.23) */
main:focus { outline: var(--outline-programmatic); }

/* Buttons: the template's one button is .btn-jkc (below). The old grey uk-button / .btn-uk styles were removed in v1.13. */
/* The chevron in front of Joomla's Read more text (core markup, no setting removes it): half the text size, centred on the line */
.readmore [class^="icon-"] { font-size: var(--fs-chevron); vertical-align: middle; }

/* .btn-jkc: the template's own button (v1.9). Replaces the old uk-button / uk-button-primary / uk-button-small classes
   on the five "Learn More" buttons of the home slider. A lighter shade of the menu-bar brown, white text, readable size. */
.btn-jkc, .jkc-slider .n2-ss-text.n2-ow-all a.btn-jkc {
  display: inline-block; min-height: var(--h-btn-jkc); padding: 0 var(--space-btn-jkc-x);
  border: var(--bw-hairline) solid var(--color-btn-jkc-bg); border-radius: var(--br-social);
  background: var(--color-btn-jkc-bg); color: var(--color-btn-jkc-text);
  font-family: var(--font-body); font-size: var(--fs-btn-jkc); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-btn-jkc); line-height: var(--h-btn-jkc); text-align: center; text-transform: uppercase;
  transition: background var(--transition);
}
.btn-jkc:hover, .jkc-slider .n2-ss-text.n2-ow-all a.btn-jkc:hover { background: var(--color-btn-jkc-hover-bg); border-color: var(--color-btn-jkc-hover-bg); color: var(--color-btn-jkc-text); }
.btn-jkc:focus-visible, .jkc-slider .n2-ss-text.n2-ow-all a.btn-jkc:focus-visible {
  background: var(--color-btn-jkc-hover-bg); color: var(--color-btn-jkc-text);
  outline: var(--bw-bar) solid var(--color-btn-jkc-ring); outline-offset: var(--bw-hairline);
  box-shadow: 0 0 0 calc(var(--bw-bar) + var(--bw-hairline)) var(--color-btn-jkc-edge);   /* dark edge so the white ring shows on light photos too */
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.t-container { width: 100%; max-width: var(--w-container); margin: 0 auto; }
.t-grid { display: flex; flex-flow: row wrap; }
.t-col { min-width: 0; padding: var(--space-block); }
.t-w-70 { flex: 0 0 var(--w-70); max-width: var(--w-70); }
.t-w-30 { flex: 0 0 var(--w-30); max-width: var(--w-30); }
.t-w-67 { flex: 0 0 var(--w-67); max-width: var(--w-67); }
.t-w-33 { flex: 0 0 var(--w-33); max-width: var(--w-33); }
.t-w-50 { flex: 0 0 var(--w-50); max-width: var(--w-50); }
.t-w-25 { flex: 0 0 var(--w-25); max-width: var(--w-25); }
.t-w-third { flex: 0 0 var(--w-third); max-width: var(--w-third); }
.t-w-100 { flex: 0 0 100%; max-width: 100%; }

/* ==========================================================================
   5. HEADER   (logo setting / logo position, header-top-right)
   ========================================================================== */
.t-header {
  position: relative; z-index: var(--z-header); background: var(--color-background-gray-std); color: var(--color-text-header);
  display: var(--display-header); align-items: center; column-gap: var(--space-s); padding: 0 var(--space-header-edge);
}
.t-header .t-container { flex: 1 1 0; flex-wrap: var(--wrap-header); align-items: center; min-width: 0; }
.t-header .t-col { padding: var(--space-header-y) var(--space-header-x); transition: padding var(--transition); }
.t-header .t-w-30 { flex: var(--flex-header-logo); max-width: none; }
.t-header .t-w-70 { flex: var(--flex-header-right); max-width: none; }
.t-header__right { display: flex; justify-content: var(--justify-header); align-items: center; gap: var(--space-social-gap); flex-wrap: wrap; }
.t-header__right > .mod { min-width: 0; margin: 0; }
/* Social icons fold away on scrolled phones (html.is-compact below 48rem sets --w/--h/--vis-header-social). The chrome wraps every module in
   <div class="mod ..."> and mod_jpc_sociallinks prints its root element (<nav class="jpc-sociallinks jpc-sociallinks--boxed">, per the module's STYLING.md; the class the
   module sets its tokens on, see the --jpc-sl-* block below) INSIDE that wrapper, so the old direct-child selector never matched (v1.24). Two rules, kept apart on purpose:
   the first needs no :has() (works everywhere; collapses the icons), the second also collapses the empty wrapper so it adds no flex gap (browsers without :has()
   just keep that one gap). The unwrapped case (chrome style "none") is covered by the first rule. */
.t-header__right .jpc-sociallinks--boxed { max-width: var(--w-header-social); max-height: var(--h-header-social); overflow: var(--overflow-header-social); visibility: var(--vis-header-social); }
.t-header__right > .mod:has(> .jpc-sociallinks--boxed) { max-width: var(--w-header-social); max-height: var(--h-header-social); overflow: var(--overflow-header-social); visibility: var(--vis-header-social); }
.t-logo { text-align: var(--align-logo); }
.t-logo a { display: block; }
.t-logo img { display: block; width: var(--w-logo); height: auto; transition: width var(--transition); }

/* STICKY HEADER + MENU (v1.9). Header and menu sit in .t-top, which is fixed to the top of the window; .t-top-wrap
   keeps the page's place with the FULL header height, so shrinking on scroll never moves the page (no jump, no flicker
   loop at the switch point, and the shrink can be animated). js/template.js measures the full and compact heights, adds
   the class is-compact to <html> after the page has scrolled by the difference, and publishes the current height as
   --h-top-now for scroll-padding-top. Without JavaScript (no html.js) the header is normal and simply scrolls away. */
html { scroll-padding-top: calc(var(--h-top-now) + var(--space-s)); }   /* anchors and keyboard focus stop below the header */
html.no-anim { --transition: 0s; }                                      /* used by the script while it measures */
html.js .t-top-wrap { height: var(--h-top-full); }
html.js .t-top { position: fixed; top: 0; right: 0; left: 0; z-index: var(--z-top); transition: box-shadow var(--transition); }
html.is-compact .t-top { box-shadow: var(--shadow-top); }
html.is-compact { --w-logo: var(--w-logo-compact); --space-header-y: var(--space-header-y-compact); }

/* mod_jpc_sociallinks: set the module's own --jpc-sl-* tokens (see its STYLING.md). The modifier class is targeted because the
   module sets its tokens there at the same specificity; this file loads after the module stylesheet. */
.jpc-sociallinks--boxed {
  --jpc-sl-gap: var(--space-social-gap);
  --jpc-sl-icon: var(--fs-social);
  --jpc-sl-pad: var(--space-social-pad);
  --jpc-sl-radius: var(--br-social);
  --jpc-sl-bg: var(--color-social-box);
  --jpc-sl-color: var(--color-social-glyph);
  --jpc-sl-border: var(--bw-hairline) solid var(--color-social-box);
  --jpc-sl-hover-bg: var(--color-social-hover-bg);
  --jpc-sl-hover-color: var(--color-social-hover-glyph);
  --jpc-sl-focus: var(--color-social-box);   /* the module default (currentColor) is white here = invisible on the white header */
}
.jpc-sociallinks--basic {
  --jpc-sl-gap: var(--space-social-gap);
  --jpc-sl-icon: var(--fs-social);
  --jpc-sl-color: var(--color-social-basic);
  --jpc-sl-focus: var(--color-social-basic);
}
.jpc-sociallinks--basic .jpc-sociallinks__link { color: var(--jpc-sl-color); }   /* the module leaves basic to the template's link colour */

/* Smart Search (core mod_finder) */
.mod-finder__search { display: flex; }
.mod-finder, .mod-finder .form-control { min-width: 0; }   /* lets the search field shrink on narrow phones instead of overflowing */
.mod-finder .form-control, .mod-finder input[type="text"] {
  width: var(--w-search-input); padding: var(--space-xs) var(--space-s);
  border: var(--bw-hairline) solid var(--color-border-input); border-right: 0; border-radius: var(--br-none);
  background: var(--color-page); color: var(--color-text);
  font-size: var(--fs-text); font-weight: var(--fw-medium); line-height: var(--flh-tight);
}
.mod-finder .btn-primary {
  padding: var(--space-xs) var(--space-s); border: 0; border-radius: var(--br-none);
  background: var(--color-search-btn); color: var(--color-search-btn-text);
  font-family: var(--font-body); font-size: var(--fs-text); font-weight: var(--fw-medium); line-height: var(--flh-tight);
  box-shadow: var(--shadow-card);
}
.mod-finder .btn-primary:hover, .mod-finder .btn-primary:focus { background: var(--color-search-btn); color: var(--color-search-btn-text); }

/* ==========================================================================
   6. NAVIGATION   (core Menu module markup: .mod-menu .nav-item .current .active .parent)
   ========================================================================== */
.t-nav { position: relative; z-index: var(--z-nav); background: var(--color-nav-bg); color: var(--color-nav-link); font-family: var(--font-head); font-size: var(--fs-small); text-align: center; }
/* A module title inside the menu bar made the bar several times too tall (v1.0 problem). The title is an
   admin label, so it stays in the page for screen readers but is not drawn in the bar. */
.t-nav .mod__title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.t-nav .mod { margin: 0; }
.t-nav .mod-menu { display: var(--display-nav); flex-flow: row wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.t-nav .mod-menu li { position: relative; }
.t-nav .mod-menu a {
  display: block; padding: var(--space-nav-y) var(--space-nav-x);
  color: var(--color-nav-link); font-weight: var(--fw-medium); line-height: var(--flh-nav);
  transition: background var(--transition);
}
.t-nav .mod-menu > li:hover > a, .t-nav .mod-menu > li:focus-within > a { background: var(--color-nav-hover-bg); }
/* Joomla 6 prints a toggle button after each parent link (core menu.js opens / closes the sub-menu with it). It is laid over the
   arrow above (out of flow: one row, nothing moves), transparent, and its own chevron icon is switched off, so the arrow looks as in v1.16 (v1.18) */
.t-nav .mod-menu__toggle-sub {
  position: absolute; top: 0; right: 0; bottom: 0; width: calc(2 * var(--space-nav-x) + 1em);
  padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.t-nav .mod-menu__toggle-sub [class^="icon-"]::before { content: none; }
.t-nav .mod-menu__toggle-sub:focus-visible { outline: var(--bw-bar) solid var(--color-focus-ring); outline-offset: calc(-1 * var(--bw-bar)); }
.t-nav .mod-menu > li.parent > a::after { content: "\2304"; margin-left: var(--space-s); color: var(--color-nav-indicator); }

/* PROPOSED active state (approved): white tab + maroon text + 3px maroon bar on the current page;
   a parent of the current page gets a grey bar. Core also sets aria-current on the link. */
.t-nav .mod-menu li.current > a {
  background: var(--color-nav-active-bg); color: var(--color-nav-current-text);
  box-shadow: inset 0 calc(-1 * var(--bw-bar)) 0 var(--color-nav-current-bar);
}
.t-nav .mod-menu li.active:not(.current) > a { box-shadow: inset 0 calc(-1 * var(--bw-bar)) 0 var(--color-nav-branch-bar); }
.t-nav .mod-menu a:focus-visible { outline: var(--bw-bar) solid var(--color-focus-ring); outline-offset: calc(-1 * var(--bw-bar)); }
.t-nav .mod-menu li.current > a:focus-visible { outline-color: var(--color-nav-current-bar); }

/* dropdown: closed and open are one state, aria-hidden on the sub-menu (core menu.js sets it from the toggle button and
   Escape; js/template.js sets it for hover). Core's own display:none for aria-hidden="true" is overridden here so the fade works. */
.t-nav .mod-menu__sub {
  display: block; position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); width: var(--w-dropdown);
  margin: 0; padding: 0; list-style: none; text-align: left; font-size: var(--fs-small);
  background: var(--color-nav-dropdown-bg);
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.t-nav .mod-menu__sub[aria-hidden="false"] { opacity: 1; visibility: visible; }
/* v1.25 without JavaScript nothing sets aria-hidden, so the sub-menus would stay closed for good: open them on hover and keyboard focus (CSS only).
   html.js is set by an inline script in the head, so this applies only when scripts are off. */
html:not(.js) .t-nav .mod-menu li:hover > .mod-menu__sub, html:not(.js) .t-nav .mod-menu li:focus-within > .mod-menu__sub { opacity: var(--opacity-solid); visibility: visible; }
.t-nav .mod-menu__sub a { padding: var(--space-dropdown-y) var(--space-dropdown-x); }
.t-nav .mod-menu__sub li:hover > a, .t-nav .mod-menu__sub li:focus-within > a { background: var(--color-nav-dropdown-hover-bg); }

/* burger and off-canvas drawer (built by js/template.js from the menu position) */
.t-burger {
  display: block; position: var(--position-burger); flex: none; top: var(--space-s); left: var(--space-s); z-index: var(--z-burger);
  padding: var(--space-xs); border: 0; background: transparent; color: var(--color-text-header);
  font-size: var(--fs-burger); line-height: var(--flh-solid); cursor: pointer;
}
.t-burger--solo { position: relative; top: 0; left: 0; }
.t-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); width: var(--w-drawer); overflow-y: auto;
  background: var(--color-nav-dropdown-bg); color: var(--color-nav-link);
  font-family: var(--font-head); transform: translateX(-100%); visibility: hidden;
  transition: transform var(--transition), visibility var(--transition);
}
.t-drawer { --color-focus-page: var(--color-focus-ring); }   /* v1.25: dark surface, white ring */
.t-drawer a:focus-visible, .t-drawer__close:focus-visible { outline-offset: calc(-1 * var(--bw-focus)); }   /* inside the box: the drawer clips at its edges */
/* v1.25 visible Close button, first stop in the drawer (created by js/template.js; the label is the language string TPL_JKC_MENU_CLOSE) */
.t-drawer__close {
  display: block; margin: var(--space-s) var(--space-s) 0 auto; padding: var(--space-xs) var(--space-m);
  border: 0; background: transparent; color: var(--color-nav-link);
  font-size: var(--fs-drawer-close); line-height: var(--flh-solid); cursor: pointer;
  transition: background var(--transition);
}
.t-drawer__close:hover { background: var(--color-nav-dropdown-hover-bg); }
.t-drawer ul { margin: 0; padding: 0; list-style: none; }
.t-drawer a { display: block; padding: var(--space-m); color: var(--color-nav-link); }
.t-drawer ul ul a { padding-left: var(--space-xl); font-size: var(--fs-small); }
.t-drawer li.current > a {
  background: var(--color-nav-active-bg); color: var(--color-nav-current-text);
  box-shadow: inset var(--bw-bar) 0 0 var(--color-nav-current-bar);
}
.t-scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--color-scrim); opacity: 0; visibility: hidden; transition: opacity var(--transition); }
html.drawer-open .t-drawer { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-drawer); }
html.drawer-open .t-scrim { opacity: 0.5; visibility: visible; }

/* ==========================================================================
   7. TOOLBAR   (toolbar-left, toolbar-right; Home layout)
   ========================================================================== */
.t-toolbar { color: var(--color-brown-accent-med); }
.t-toolbar .t-grid { padding: 0 var(--space-toolbar-x); }
.t-toolbar .t-col { padding: 0; text-align: var(--text-align-small); }
.t-toolbar .t-toolbar__right { text-align: var(--text-align-toolbar-right); }   /* v1.2 bug: ".t-toolbar .t-col" outranked the plain class and left-aligned it */
.t-toolbar h4, .t-toolbar .jkc-tagline ul { color: var(--color-brown-accent-med); }   /* heading margins as the original (nucleus); the uk-margin-* classes were inert */

/* ==========================================================================
   8. HERO   (showcase-left = Smart Slider 3, showcase-right = reviews)
   ========================================================================== */
.t-hero { background: var(--color-hero); color: var(--color-white); }
.t-hero .t-grid { align-items: stretch; }
.t-hero__left { margin-left: var(--space-hero-left); }
.t-hero__right { display: flex; align-items: center; flex: 1; max-width: var(--w-hero-right-max); margin: 0 var(--space-hero-right) 0 var(--space-hero-right-lead); }
.t-hero .mod { margin: 0; width: 100%; }

/* Smart Slider caption (opt-in Module Class "jkc-slider" on the slider module).
   Live values: title 268.75% / weight 600, text 112.5% / weight 400, box black 50%.
   Requested: title +20% and heavier, text +10-15% and slightly heavier, box = height of the
   caption text, 98% of the image width, black 50% (token --color-slide-caption-bg).
   Smart Slider writes its own rules with the slider id (div#n2-ss-N ...), which outrank
   plain class selectors; the few !important flags below are the documented exception.
   The structure (.n2-ss-layer--block row, .n2-ss-text items) is Smart Slider 3's own. */
.jkc-slider .n2-ss-layer--block {
  width: var(--w-slide-caption) !important;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}
.jkc-slider .n2-ss-layer-row.n2-ss-layer-with-background {
  background-color: var(--color-slide-caption-bg) !important;
}
.jkc-slider .n2-ss-layer-row-inner { width: 100% !important; margin: 0 !important; }
.jkc-slider .n2-ss-layer-col { padding: var(--space-slide-caption) !important; }
.jkc-slider .n2-ss-text.n2-ow {
  color: var(--color-slide-caption-text) !important;
  font-size: var(--fs-slide-title) !important;
  font-weight: var(--fw-slide-title) !important;
}
.jkc-slider .n2-ss-text.n2-ow-all p {
  color: var(--color-slide-caption-text) !important;
  font-size: var(--fs-slide-text) !important;
  font-weight: var(--fw-slide-text) !important;
}
/* The "Learn More" buttons inside the slides are class="btn-jkc" (module-content/home-buttons.md).
   Smart Slider gives every link in a caption its own colour (#1890d7), size, weight, line height and no capitals, with the
   slider id in the selector (div#n2-ss-N .n2-font-...-paragraph a). Only these !important flags beat that (same documented
   exception as the caption rules above); the look itself is the .btn-jkc rule in section 3. */
.n2-ss-text.n2-ow-all a.btn-jkc {
  color: var(--color-btn-jkc-text) !important;
  font-size: var(--fs-btn-jkc) !important; font-weight: var(--fw-medium) !important;
  letter-spacing: var(--ls-btn-jkc) !important; line-height: var(--h-btn-jkc) !important; text-transform: uppercase !important;
}

/* Review widget wrapper (opt-in Module Class "jkc-reviews"; the embed brings its own CSS) */
.jkc-reviews { width: 100%; padding: var(--space-s); background: var(--color-review-panel-bg); }

/* GuildQuality compact variant (opt-in "jkc-reviews-compact"): ported from custom.scss. The embed
   is third-party markup, so these use the same !important flags the client already relies on. */
.jkc-reviews-compact #GQembeddedreview.gq-embed #gq-reviews-profile.gq-embed_header { padding: var(--space-s) !important; }
.jkc-reviews-compact #GQembeddedreview.gq-embed #gq-reviews-profile.gq-embed_header h2 { margin: 0 !important; }
.jkc-reviews-compact #GQembeddedreview.gq-embed .gq-embed_review .gq-embed_card { padding: var(--space-xs) 0 0 var(--space-gq-card-left) !important; }
.jkc-reviews-compact #GQembeddedreview.gq-embed .gq-embed_review .gq-embed_card-stars { margin: var(--space-xs) 0 !important; }
.jkc-reviews-compact #GQembeddedreview.gq-embed .gq-embed_card-title { width: 100% !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; flex-direction: row; }
.jkc-reviews-compact #GQembeddedreview.gq-embed .gq-embed_card-meta { margin-left: var(--space-gq-meta-left) !important; }
.jkc-reviews-compact #GQembeddedreview.gq-embed .gq-embed_review:nth-child(n+4) { display: none !important; }

/* ==========================================================================
   9. OPT-IN MODULE CLASSES   (type the class into Module > Advanced > Module Class)
      jkc-card         showcase cards   (Articles module, layout "card")
      jkc-feature-box  bordered boxes with ruled title
      jkc-video        centred poster image
      jkc-box          bordered sidebar box;  + jkc-contact  or  jkc-menu-box
      jkc-footer-links footer link lists
      jkc-tagline      footer tagline
      jkc-copyright    copyright block   (the social icons, award images and map are modules with their own
                       Style options and need no Module Class here; their leftover rules were removed in v1.24)
   ========================================================================== */
/* Card content (CLEAN markup, article body or Custom HTML):
     <figure><a href><img></a></figure>  <h2>Title</h2>  <p>Text</p>  <p><a class="btn-jkc" href>Read More</a></p>
   The centring comes from .jkc-card, the bar under the title from the h2 rule: no <center>, no <hr>,
   no uk-* classes needed. */
.jkc-card { height: 100%; padding: var(--space-block); text-align: center; border: var(--bw-hairline) solid var(--color-background-gray-std); }
.jkc-card .newsflash-image { margin: 0 0 var(--space-m); }
.jkc-card h2, .jkc-card .newsflash-title {
  margin: var(--space-heading-before) 0 var(--space-p-after); padding-bottom: var(--space-p-after);
  border-bottom: var(--bw-rule) solid var(--color-rule);   /* same bar as the old <hr> under the title */
  font-size: var(--fs-h2);
}
.jkc-card .newsflash-title a { color: var(--color-heading); }
.jkc-card .mod-articles-item > :last-child { margin-bottom: 0; }   /* the button's own <p> adds no extra space under the card */

/* Feature boxes (Articles module, layout "card", Module Class jkc-feature-box; the article body is the markup
   below. The selectors are plain element selectors under the Module Class, so they also fit any module that
   prints the same headings and paragraphs). CLEAN markup:
     <h2>Title</h2> <h4>Subtitle</h4> <p>Text</p>
     contact box: <h2>Contact Us Now</h2> <p class="jkc-phone"><a href="tel:..">..</a></p> <p class="jkc-email"><a href="mailto:..">..</a></p> */
.jkc-feature-box { height: 100%; padding: var(--space-xl); border: var(--bw-hairline) solid var(--color-brown-light); }
.jkc-feature-box h2, .jkc-feature-box .newsflash-title, .jkc-feature-box .jkc-phone {
  margin: var(--space-heading-before) 0 var(--space-heading-after); padding-bottom: var(--space-m);
  border-bottom: var(--bw-hairline) solid var(--color-brown-accent-light);
  text-align: center; font-family: var(--font-head); font-size: var(--fs-title-box); font-weight: var(--fw-medium); line-height: var(--flh-title-box);
}
.jkc-feature-box h3, .jkc-feature-box h4 { text-align: center; }
.jkc-feature-box p { font-size: var(--fs-text); line-height: var(--flh-text); }
.jkc-feature-box .jkc-phone { font-size: var(--fs-phone-feature); font-weight: var(--fw-semibold); line-height: var(--flh-phone-feature); }
.jkc-feature-box .jkc-email { margin: var(--space-heading-before) 0 var(--space-heading-after); text-align: center; font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--flh-callout); }
.jkc-video { text-align: center; }
.jkc-video a { display: inline-block; }

/* sidebar boxes (old Gantry names: sidebar_standards, sidebar_contact_us, sidebar_menu) */
.jkc-box { margin-bottom: var(--space-xl); padding: var(--space-xl); border: var(--bw-hairline) solid var(--color-background-gray-std); }
.jkc-box .mod__title, .jkc-box h2, .jkc-box .newsflash-title {
  margin: var(--space-heading-before) 0 var(--space-heading-after); padding-bottom: var(--space-m);
  border-bottom: var(--bw-hairline) solid var(--color-brown-accent-light);
  text-align: center;
}
.jkc-box .mod__title { font-size: var(--fs-body); }
/* Contact box (Articles module, layout card, Module Class "jkc-box jkc-contact"); article body:
   <h2>Contact Us Now</h2> <p class="jkc-phone"><a href="tel:..">..</a></p> <p class="jkc-email"><a href="mailto:..">..</a></p>
   Spacing measured against the original sidebar box (heading margins .75rem / 1.5rem, 1rem under each rule). */
.jkc-contact h2, .jkc-contact .newsflash-title { font-size: var(--fs-title-box-side); }
.jkc-contact .jkc-phone {
  margin: var(--space-heading-before) 0 var(--space-heading-after); padding-bottom: var(--space-m);
  border-bottom: var(--bw-hairline) solid var(--color-brown-accent-light);
  text-align: center; font-family: var(--font-head); font-size: var(--fs-title-box); font-weight: var(--fw-heavy); line-height: var(--flh-callout);
}
.jkc-contact .jkc-email { margin: var(--space-heading-before) 0 var(--space-heading-after); text-align: center; font-family: var(--font-head); font-size: var(--fs-h3); line-height: var(--flh-callout); }
.jkc-menu-box .mod-menu { margin: 0; padding: 0; list-style: none; }
.jkc-menu-box .mod-menu li { text-align: center; font-size: var(--fs-text); line-height: var(--flh-menu-item); }

/* footer blocks */
.jkc-footer-links .mod__title { font-size: var(--fs-h3); }
/* footer link lists: bullets REMOVED on purpose (design change v1.2, see design-changes.md); the list now
   lines up with its heading instead of being indented for the dots */
.jkc-footer-links .mod-menu { margin-left: 0; padding: 0; list-style: none; font-size: var(--fs-text); }
.jkc-footer-links li { font-size: var(--fs-text); }
/* Tagline "Construct » Remodel » Improve" (Custom HTML, Module Class jkc-tagline, used in toolbar-right and
   footer-tag-left). CLEAN markup is a plain list: <ul><li>Construct</li><li>Remodel</li><li>Improve</li></ul>
   The double arrows are drawn here from the Font Awesome "angles-right" glyph (loaded locally by index.php),
   so nothing but the three words is typed in the editor. */
.jkc-tagline ul {
  margin: var(--space-heading-before) 0 var(--space-heading-after); padding: 0; list-style: none;
  color: var(--color-heading); font-family: var(--font-head); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--flh-callout);
}
.jkc-tagline li { display: inline; }
.jkc-tagline li + li::before {
  content: "\f101"; content: "\f101" / "";   /* second form (where supported) gives the glyph an empty text alternative: decorative */
  margin: 0 var(--space-tagline-arrow);
  font-family: "Font Awesome 6 Free"; font-weight: var(--fw-900); font-size: var(--fs-tagline-arrow);   /* 900 selects Font Awesome's solid glyph set */
}
.t-toolbar .jkc-tagline li + li::before { font-size: var(--fs-small); }   /* the toolbar's arrows are the small ones in the original */

/* footer menu: horizontal text menu. Works with NO new Module Class: the footer Menu module is a copy
   of the main menu and already carries the Menu Class "bottom_menu" (Joomla prints it on the list as
   ul.mod-menu.bottom_menu).
   (The live Gantry menu ran together because custom.scss targeted .menu while Joomla prints .mod-menu.) */
.mod-menu.bottom_menu {
  display: flex; flex-flow: row wrap; justify-content: center; gap: var(--space-footer-menu-gap);
  margin: var(--space-l) 0; padding: 0; list-style: none;
}
.mod-menu.bottom_menu li { padding: 0 var(--space-footer-menu-item); }
.mod-menu.bottom_menu .current a { text-decoration: underline; }

.jkc-copyright { text-align: center; }
.jkc-copyright p { font-size: var(--fs-text); }
.jkc-copyright a { font-style: italic; }

/* ==========================================================================
   10. HOME SECTIONS
   ========================================================================== */
.t-subshowcase { padding: var(--space-subshowcase) 0; }
.t-subshowcase .t-col { padding: 0; }
.t-feature { padding: var(--space-section) 0; }
.t-subfeature {
  padding: var(--space-section) 0; background: var(--color-gray-subfeature);
  border-top: var(--bw-hairline) solid var(--color-border-faint); border-bottom: var(--bw-hairline) solid var(--color-border-faint);
}
.t-subfeature .t-grid { gap: var(--space-grid-gap); }
.t-subfeature .t-col { padding: 0; }
/* three boxes plus two gaps fit one row; each box gives up its share of the gaps */
.t-subfeature .t-w-third { flex: 1 1 calc(var(--w-third) - var(--space-grid-gap)); max-width: none; }

/* ==========================================================================
   11. MAIN AND RIGHT RAIL   (default layout; right-contact above main-right)
   ========================================================================== */
.t-main { padding: var(--space-section) 0; }
/* gap between rail modules = the original's box margin (2rem) + the block spacing above and below (2 x 1.563rem) */
.t-sidebar .mod { margin: 0 0 calc(var(--space-xl) + 2 * var(--space-block)); }

/* ==========================================================================
   12. COMPONENT OUTPUT
   ========================================================================== */
.com-content-article__body::after { content: ""; display: table; clear: both; }

/* Page classes. The live site already sets these in each menu item's Page Class, so the
   existing names are kept: page_whyjkc, page_theprocess, page_testimonials, page_red_flags,
   page_aboutus, page_ourservices, page_our_awards, portfolio_overview, portfolio_category. */
.page_whyjkc .item-image.left { float: right; width: var(--w-article-float); margin: 0 0 var(--space-m) var(--space-m); }
.page_theprocess .item-image, .page_testimonials .item-image { float: right; width: var(--w-process-float); margin: 0 0 var(--space-m) var(--space-m); }
.page_theprocess h1, .page_testimonials h1 { font-size: var(--fs-title-box); }
.page_testimonials h3 { font-size: var(--fs-text); }
.page_our_awards div[itemprop="articleBody"] h2 { font-size: var(--fs-title-box); line-height: var(--flh-title-box); text-align: center; }
.page_ourservices h2 { margin-bottom: 0; font-size: var(--fs-h1); line-height: var(--flh-heading-1); }   /* v1.8: was 2.2rem on a 2.2rem size (1.0) */
.page_ourservices h3 { margin: var(--space-m) 0 var(--space-s); color: var(--color-text-accent-green); font-size: var(--fs-title-blog); line-height: var(--flh-title-blog); }
.page_ourservices p.readmore { margin: 0 0 var(--space-xl); }
/* "Continue Reading" button (Joomla's own Read more link: a.btn.btn-secondary): menu-bar brown (v1.8).
   Bootstrap 5.3 buttons take their colours from --bs-btn-* variables, so those are set here (hover, active and
   disabled states follow) instead of overriding properties. The chevron in front of the text is core markup. */
.page_ourservices p.readmore .btn-secondary {
  --bs-btn-color: var(--color-readmore-text);
  --bs-btn-bg: var(--color-readmore-bg);
  --bs-btn-border-color: var(--color-readmore-bg);
  --bs-btn-hover-color: var(--color-readmore-text);
  --bs-btn-hover-bg: var(--color-readmore-hover-bg);
  --bs-btn-hover-border-color: var(--color-readmore-hover-bg);
  --bs-btn-active-color: var(--color-readmore-text);
  --bs-btn-active-bg: var(--color-readmore-hover-bg);
  --bs-btn-active-border-color: var(--color-readmore-hover-bg);
}
.page_ourservices p.readmore .btn-secondary:focus-visible { outline: var(--bw-bar) solid var(--color-readmore-focus); outline-offset: var(--bw-hairline); }
div[itemprop="articleBody"] h3, div[itemprop="blogPost"] h3 { color: var(--color-text-accent-green); font-size: var(--fs-body); line-height: var(--flh-title-blog); }

/* About Us: staff list (round photos, text beside) */
.page_aboutus .items-leading .blog-item {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-s);
  border-top: var(--bw-hairline) solid var(--color-background-gray-std);
}
.page_aboutus .items-leading .blog-item .item-image { max-width: var(--w-staff-figure); margin: 0 var(--space-l) var(--space-l) 0; }
.page_aboutus .items-leading .blog-item .item-image img { max-width: var(--w-staff-photo); margin-top: var(--space-xl); border-radius: var(--br-round); }
.page_aboutus .items-leading .blog-item .item-content { max-width: var(--w-staff-text); }
.page_aboutus .items-leading .blog-item .item-content h2 { padding: var(--space-xl) 0 0; font-size: var(--fs-h1); line-height: var(--flh-heading-1); }   /* v1.8: was 2rem on a 2.2rem size */
.page_aboutus .items-leading .blog-item:first-child .item-content { max-width: 100%; }

/* Portfolio overview (menu item type "List All Categories"; override makes image AND title links).
   Two columns of 45% with a 2vw gap (columns AND rows), measured on the original; pictures keep their own
   proportions. Below 768px the item is 100% wide (one column). The 30px under each item is the original's
   (custom.scss); with the picture overflowing its item it gives the original's row distance. */
/* v1.20 bug fix: a title that wraps to two lines used to push its picture down (and, because the picture
   overflowed its item, into the title of the row below). The list is now a grid and every item takes a
   subgrid of three rows (title, picture, description), so the title row is as tall as the tallest title of
   the row and the picture tops line up across the row. Where subgrid is not supported the items keep
   their own three rows (the pictures then follow their own titles, as before, but nothing overlaps). */
/* v1.22: each item has padding above its title (--space-portfolio-above) so the title clearly groups with the
   picture beneath it; the list pulls up by the same amount so the first row sits where it did before. */
.portfolio_overview .com-content-categories__items { display: grid; grid-template-columns: repeat(var(--cols-portfolio), var(--w-portfolio-item)); column-gap: var(--portfolio-gap); row-gap: 0; margin: calc(-1 * var(--space-portfolio-above)) 0 0; }
/* Picture sizing copied from the original (custom.scss): min-width / min-height 100% of the item with
   object-fit: cover, so the pictures are cropped to the item box and both items of a row are equally tall.
   The link around the picture is "display: contents" so the picture still measures against the item box
   (the link is hidden from keyboard and screen readers anyway). */
.portfolio_overview .com-content-categories__item { display: grid; grid-template-rows: auto auto auto; row-gap: 0; min-width: 0; margin: 0 0 var(--space-portfolio-item); padding: var(--space-portfolio-above) 0 0; }
@supports (grid-template-rows: subgrid) {
  .portfolio_overview .com-content-categories__item { grid-row: span 3; grid-template-rows: subgrid; }
}
.portfolio_overview .com-content-categories__item-title { margin: 0 auto var(--space-portfolio-title); text-align: center; font-family: var(--font-head); }
.portfolio_overview .com-content-categories__item-image { display: contents; }
.portfolio_overview .com-content-categories__item-image img { width: 100%; min-width: 100%; min-height: 100%; object-fit: cover; }

/* Component output sits 12px in from the column edge, as in the original (a Bootstrap container's padding) */
.t-component { padding: 0 var(--space-component-x); }

/* Portfolio sub-category (blog) and property page */
.portfolio_category .page-header h1 {
  display: inline-block; color: var(--color-brown-accent-dark);
  border-bottom: var(--bw-hairline) solid var(--color-background-gray-std);
}
.portfolio_category .blog-items .blog-item { display: flex; flex-direction: column; }
.portfolio_category .blog-items .blog-item .item-content { order: 1; }
.portfolio_category .blog-items .blog-item .item-image { order: 2; margin: 0; }
.portfolio_category .blog-items .blog-item h2 { margin: var(--space-blog-title-top) 0 var(--space-m); border-bottom: 0; font-size: var(--fs-title-blog); line-height: var(--flh-title-blog); }
.portfolio_category ul.fields-container { list-style: none; }   /* margins stay the base list margins (1.5rem), as in the original */

/* v1.19: visitors must see that the project title and photo are clickable.
   Category description (the client types the instruction there, menu item: Category Description = Show) */
.portfolio_category .category-desc { margin: 0 0 var(--space-m); }
.portfolio_category .category-desc > :last-child { margin-bottom: 0; }
/* The title looks like a link: always-visible thin underline, an arrow after the text, darker on hover, a focus ring.
   (The arrow is decoration: the "/ ''" form gives it empty alternative text, so screen readers skip it; the first
   declaration is the fallback for browsers that do not know that form. inline-block keeps the underline off the arrow.) */
.portfolio_category .blog-items .blog-item .item-content .page-header h2 a {
  text-decoration: underline;
  text-decoration-thickness: var(--bw-portfolio-underline);
  text-underline-offset: var(--offset-portfolio-underline);
  transition: color var(--transition);
}
.portfolio_category .blog-items .blog-item .item-content .page-header h2 a::after {
  content: var(--content-portfolio-arrow);
  content: var(--content-portfolio-arrow) / "";
  display: inline-block; margin-left: var(--space-portfolio-arrow);
}
.portfolio_category .blog-items .blog-item .item-content .page-header h2 a:hover { color: var(--color-portfolio-title-hover); }
.portfolio_category .blog-items .blog-item .item-content .page-header h2 a:focus-visible {
  outline: var(--bw-bar) solid var(--color-portfolio-focus); outline-offset: var(--bw-hairline);
}
/* The photo carries an always-visible "View photos" bar along its bottom edge (markup: override html/com_content/category/blog_item.php;
   the label is the language string TPL_JKC_PORTFOLIO_VIEW_PHOTOS). No hover is needed to see it; hover and focus only darken it. */
.portfolio_category .blog-items .blog-item .jkc-photo-link { display: block; position: relative; }
.portfolio_category .blog-items .blog-item .jkc-photo-link img { display: block; }
.portfolio_category .blog-items .blog-item .jkc-photo-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-portfolio-bar-y) var(--space-portfolio-bar-x);
  background: var(--color-portfolio-bar-bg); color: var(--color-portfolio-bar-text);
  font-family: var(--font-body); font-size: var(--fs-portfolio-bar); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-portfolio-bar); line-height: var(--flh-portfolio-bar); text-align: left;
  transition: background var(--transition);
}
.portfolio_category .blog-items .blog-item .jkc-photo-bar::after {
  content: var(--content-portfolio-arrow);
  content: var(--content-portfolio-arrow) / "";
  display: inline-block; margin-left: var(--space-portfolio-arrow);
}
.portfolio_category .blog-items .blog-item .jkc-photo-link:hover .jkc-photo-bar,
.portfolio_category .blog-items .blog-item .jkc-photo-link:focus-visible .jkc-photo-bar { background: var(--color-portfolio-bar-hover-bg); }
.portfolio_category .blog-items .blog-item .jkc-photo-link:focus-visible {
  outline: var(--bw-bar) solid var(--color-btn-jkc-ring); outline-offset: calc(-1 * var(--bw-bar));
  box-shadow: inset 0 0 0 calc(var(--bw-bar) + var(--bw-hairline)) var(--color-btn-jkc-edge);   /* dark edge so the white ring shows on light photos too */
}

/* Glossary (article content: <dl class="glossary"><dt>Term</dt><dd>Meaning</dd> ...</dl>, v1.13). Opt-in by the class on the dl.
   Term in bold heading colour, a thin rule between entries, the meaning in body text. Several terms for one meaning
   (<dt>Base</dt><dt>Baseboard</dt><dd>...) stay together: no rule or gap between consecutive terms. The text column is the
   site's own, so there is no max-width. */
.glossary { margin: var(--space-l) 0; }
.glossary dt {
  margin: var(--space-m) 0 0; padding: var(--space-m) 0 0; border-top: var(--bw-hairline) solid var(--color-border-input);
  color: var(--color-heading); font-weight: var(--fw-bold);
}
.glossary dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.glossary dt + dt { margin-top: 0; padding-top: var(--space-xs); border-top: 0; }
.glossary dd { margin: var(--space-s) 0 0; }

/* ACF Gallery field (nrf-widget tf-gallery-wrapper). The plugin supplies the grid CSS and the
   per-field --columns value; these rules size the container, supply fallbacks and set the gap. */
.tf-gallery-wrapper { --columns: var(--cols-gallery); --gap: var(--gap-gallery); }
.tf-gallery-wrapper .gallery-items.grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); gap: var(--gap); align-items: center; }
.tf-gallery-wrapper .gallery-items .item { margin: 0; text-align: center; }
.tf-gallery-wrapper .gallery-items .item a { display: block; }
.tf-gallery-wrapper .gallery-items .item img { width: 100%; }

/* ==========================================================================
   13. FOOTER   (footer-map, footer-links-*, footer-tag-*, footer-bottom-box)
   ========================================================================== */
.t-footer { background: var(--color-page); color: var(--color-text); border-top: var(--bw-hairline) solid var(--color-border-faint); text-align: var(--text-align-footer); }
.t-footer .t-container { padding: var(--space-section) 0; }
.t-footer .mod { margin: 0; }
/* Footer map column: ONE stacking context at --z-map (v1.24; replaces the old opt-in Module Class "jkc-map" of v1.10). A Leaflet map draws its
   panes and controls with z-index up to about 1000; contained here they can never paint over the sticky header (--z-top). It sits on the column,
   not on a Module Class, so it works for whatever map module is in footer-map. If the installed map module isolates itself, this rule can go. */
.t-footer__map { position: relative; z-index: var(--z-map); isolation: isolate; }
/* Tag row: the right column (social icons) is centred on the tagline's TEXT line. The tagline's margins are uneven (before 0.75rem,
   after 1.5rem), so the column gets that difference as extra bottom padding. The icon list is a flex row, so text-align does not
   move it: justify-content does. */
.t-footer__tag { align-items: center; }
.t-footer__tag-right { text-align: right; padding-bottom: calc(var(--space-block) + var(--space-heading-after) - var(--space-heading-before)); }
.t-footer__tag-right .jpc-sociallinks__list { justify-content: var(--justify-footer-social); }
.t-footer__bottom { background: var(--color-background-gray-light); }

/* ==========================================================================
   14. SYSTEM PAGES
   ========================================================================== */
.t-error__box { text-align: center; }
.t-error__code { margin: 0; color: var(--color-logo-red); font-family: var(--font-head); font-size: var(--fs-error-code); line-height: var(--flh-solid); }
.t-offline__login input { padding: var(--space-xs) var(--space-s); border: var(--bw-hairline) solid var(--color-border-input); }
.t-component__wrap { padding: var(--space-l); }

/* ==========================================================================
   15. RESPONSIVE - tokens are redefined; properties are not overridden.
   Gantry breakpoint is 48rem (768px): burger drawer, stacked hero, one-column trios.
   ========================================================================== */
@media (max-width: 59.99rem) {
  :root { --w-67: 100%; --w-33: 100%; }
}
@media (max-width: 47.99rem) {
  :root {
    --w-70: 100%; --w-30: 100%; --w-50: 100%; --w-25: 100%; --w-third: 100%; --w-hero-right-max: 100%;
    --text-align-small: center; --text-align-toolbar-right: center; --text-align-footer: center; --justify-footer-social: center;
    --justify-header: flex-end; --align-logo: left;
    /* header on phones: ONE row = burger, logo, search; smaller logo; the social icons fold away once scrolled */
    --display-header: flex; --space-header-edge: var(--space-s); --wrap-header: nowrap; --space-header-x: 0;
    --flex-header-logo: 0 0 auto; --flex-header-right: 1 1 0; --position-burger: static;
    --w-logo: 100px; --w-logo-compact: 52px; --w-search-input: 6rem;
    --space-hero-left: 0; --space-hero-right: 0; --space-grid-gap: 0rem;   /* needs a unit: it is used in calc(100% - gap); a bare 0 made that invalid and the narrow boxes shrank to their content (v1.12) */
    --w-portfolio-item: 100%; --cols-portfolio: 1;
    --w-article-float: 100%; --w-process-float: 100%;
    --fs-h1: 1.8rem; --space-subshowcase: 0.5rem;
    --w-staff-figure: 100%; --w-staff-text: 100%; --w-staff-photo: 40vw;
  }
  /* only when JavaScript is available to build the drawer; otherwise the menu stays visible */
  html.js { --display-nav: none; }
  html.is-compact { --w-header-social: 0; --h-header-social: 0; --vis-header-social: hidden; --overflow-header-social: hidden; }
}

/* printing: keep a term with its meaning, do not split a meaning across pages */
@media print {
  .glossary dt { break-after: avoid; }
  .glossary dd { break-inside: avoid; }
}

/* ==========================================================================
   16. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; }
}