@charset "UTF-8";

/* ==================================================================
   PCOM 2026 — Paschen Communications Joomla 5/6 site template
   (C) 2026 Paschen Communications, LLC — GPL-2.0-or-later

   THIS IS THE ONLY STYLESHEET. Edit it and upload it — there is no
   build step, no SCSS, nothing to compile. The file you edit is the
   file the browser loads.

   Plain, FLAT CSS — no nesting, no preprocessor syntax, no minimum
   browser version. Every selector is written out in full, so this file
   works in any browser that understands CSS custom properties.

   Order matters: a rule further down this file beats an identical
   selector further up. Section 9 is last on purpose.

   To re-theme colours, fonts and sizes, edit section 1 only.

   Media queries in this file, and only these three:
     560px   phone   — hamburger menu takes over
     900px   tablet  — single-column content
     1280px  desktop — boxed content max-width

   CONTENTS
     1. DESIGN TOKENS
     2. BASE
     3. HEADER
     4. HOME LAYOUT
     5. DEFAULT LAYOUT
     6. CONTENT HELPERS
     7. FOOTER
     8. SYSTEM PAGES
     9. STACKING / Z-INDEX
   ================================================================== */

/* ==================================================================
   1. DESIGN TOKENS  (:root custom properties)
   ================================================================== */

/* =============================================================
   PCOM 2026 — CSS custom properties
   Change anything here to re-theme the whole template.
   Naming follows the Paschen reference stylesheet (--color-*, --fs-*,
   --flh-*, --fw-*, --br-*).
   =============================================================
   */
/* Poppins is loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in the entry-point PHP files (index/error/offline/component) — a non-
   blocking, deduplicated load. Self-host Poppins in production for
   speed/privacy. (Do not re-add an @import here: it double-loads the font
   on index.php and is render-blocking.)
   */
:root {
  /* ---- Brand colours ---- */
  --color-rust: #9C4426; /* PRIMARY brand colour (logo wordmark) */
  --color-rust-dark: #7A3319;
  --color-rust-faint: #F5EAE4;
  --color-blue-med: #43A8DE; /* accent blue */
  --color-blue-dark: #043A54; /* deep blue (hero, footer, headings) */
  --color-blue-faint: #E5F7FF; /* pale blue section background */
  /* ---- Neutrals ---- */
  --color-ink: #1A2430; /* body text */
  --color-grey-light: #5B6670; /* muted text */
  --color-grey-faint: #EDEDED;
  --color-line: #E4E7EA; /* borders */
  --color-white: #FFFFFF;
  /* ---- Functional ---- */
  --color-link: var(--color-rust);
  --color-link-hover: var(--color-rust-dark);
  /* ---- Alerts ---- */
  --color-success: #d4edda;
  --color-info: #d1ecf1;
  --color-warning: #fff3cd;
  --color-danger: #f8d7da;
  
  /* ---- Typography ---- */
  --font-head: 'Poppins', Arial, Helvetica, sans-serif;
  --font-body: 'Poppins', Arial, Helvetica, sans-serif;
  --font-menu: 'Poppins', Arial, Helvetica, sans-serif;
  /* font sizes */
  --fs-300: 0.85rem;
  --fs-400: 1rem;
  --fs-500: 1.15rem;
  --fs-600: 1.3rem;
  --fs-700: 1.5rem;
  --fs-900: 2rem;
  --fs-1200: 2.6rem;
  --fs-1600: 3.4rem;
  /* Oversized display numeral — outside the text scale on purpose. Fluid so it
     doesn't dominate a phone screen; reaches the previous flat 6rem at ~800px
     and above, so nothing changes on desktop. */
  --fs-error-code: clamp(3.5rem, 12vw, 6rem);
  /* line heights */
  --flh-300: 1.4;
  --flh-400: 1.6;
  --flh-700: 1.2;
  --flh-900: 1.15;
  --flh-1600: 1.08;
  /* font weights */
  --fw-300: 300;
  --fw-400: 400;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  /* ---- Radius ---- */
  --br-small: 4px;
  --br-std: 6px;
  --br-large: 14px;
  /* ---- Spacing & structure ---- */
  --space-section: 80px; /* vertical rhythm of sections */
  --space-gutter: 28px; /* .t-wrap side padding */
  --width-boxed: 1280px;
  --height-header: 96px;
  --height-header-mobile: 74px;
  --height-topbar: 40px;
  /* ---- Effects ---- */
  --shadow-card: 0 18px 40px rgba(4, 58, 84, 0.12);
  --shadow-header: 0 2px 14px rgba(4, 58, 84, 0.06);
  --transition: 0.2s ease;
  /* ---- Layering (z-index scale) ----
     One place to control what paints over what. Values are deliberately
     high so third-party module CSS (sliders, page builders, pasted
     Custom HTML) can't scroll over the sticky header. Content regions
     are also isolated — see section 9. */
  --z-below: -1; /* decorative layers behind their own content */
  --z-base: 1; /* in-flow content that needs to sit above a ::before/::after */
  --z-sticky: 900; /* sticky elements inside the page body */
  --z-header: 1000; /* sticky site header — must stay clickable */
  --z-dropdown: 1010; /* menu drop-downs / mobile nav panel */
  --z-overlay: 1100; /* full-screen overlays (modals, off-canvas, lightboxes) */
}

/* ==================================================================
   2. BASE  (reset, typography, buttons, layout container)
   ================================================================== */

/* =============================================================
   PCOM 2026 — base reset, typography, buttons, helpers
   =============================================================
   */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stop iOS/Android from silently inflating text in landscape. We set the
     mobile sizes deliberately below; let them stand.
     */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--fw-300);
  font-size: var(--fs-400);
  line-height: var(--flh-400);
  color: var(--color-ink);
  background: var(--color-white);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-link-hover);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--color-blue-dark);
  line-height: var(--flh-700);
  margin: 0 0 0.5em;
}

/* EVERY heading level gets an explicit size. Levels left unsized fall back to
   the browser default (h5 0.83em, h6 0.67em) — which renders module and article
   headings smaller than the body text around them. h5/h6 therefore bottom out
   at body size rather than dropping below it; h6 is distinguished by tracking,
   not by being tiny.
   */
h1 {
  font-size: var(--fs-1200);
  font-weight: var(--fw-700);
}

h2 {
  font-size: var(--fs-900);
  font-weight: var(--fw-700);
}

h3 {
  font-size: var(--fs-700);
  font-weight: var(--fw-700);
}

h4 {
  font-size: var(--fs-500);
  font-weight: var(--fw-600);
}

h5 {
  font-size: var(--fs-400);
  font-weight: var(--fw-600);
}

h6 {
  font-size: var(--fs-400);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p {
  margin: 0 0 1.1em;
}

ul, ol {
  margin: 0 0 1.2em 1.25em;
}

li {
  margin-bottom: 0.5em;
}

blockquote {
  border-left: 4px solid var(--color-rust);
  background: var(--color-rust-faint);
  padding: 18px 24px;
  border-radius: 0 var(--br-std) var(--br-std) 0;
  margin: 1.4em 0;
  color: var(--color-rust-dark);
  font-weight: var(--fw-400);
}

/* Boxed content wrapper */
.t-wrap {
  max-width: var(--width-boxed);
  margin: 0 auto;
  padding: 0 var(--space-gutter);
}

/* Vertical section rhythm */
.t-section {
  padding: var(--space-section) 0;
}

/* Buttons */
.t-btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: var(--fw-600);
  font-size: var(--fs-400);
  line-height: 1;
  padding: 0.85em 1.8em;
  border-radius: var(--br-std);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.t-btn-primary {
  background: var(--color-rust);
  color: var(--color-white);
}

.t-btn-primary:hover {
  background: var(--color-rust-dark);
  color: var(--color-white);
}

.t-btn-ghost {
  border-color: var(--color-white);
  color: var(--color-white);
}

.t-btn-ghost:hover {
  background: var(--color-white);
  color: var(--color-blue-dark);
}

/* Eyebrow / kicker */
.t-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-300);
  font-weight: var(--fw-600);
  color: var(--color-rust);
}

@media only screen and (max-width: 560px) {
  /* Body stays at --fs-400 (1rem / 16px). Do NOT shrink it here: phones are
     held further from the eye than a monitor, so 16px is a floor, not a
     target — and any <input> under 16px makes iOS Safari zoom the page on
     focus. Tighten the vertical rhythm and the display sizes instead.
     */
  :root {
    --space-section: 52px;
  }
  h1 {
    font-size: var(--fs-900);
  }
  h2 {
    font-size: var(--fs-700);
  }
}

/* ==================================================================
   3. HEADER  (top bar, logo, nav, hamburger, mobile drawer)
   ================================================================== */

/* =============================================================
   PCOM 2026 — top bar, header, main navigation
   =============================================================
   */
/* ---- Top bar ---- */
.t-topbar {
  background: var(--color-blue-dark);
  color: #cfe6f3;
  font-size: var(--fs-300);
  /* flex-wrap lets the two groups drop to a second row rather than crushing
     together once the utility text outgrows a narrow viewport.
     */
}
.t-topbar .t-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: var(--height-topbar);
  gap: 16px;
}
.t-topbar a {
  color: #cfe6f3;
}
.t-topbar a:hover {
  color: var(--color-blue-med);
}
.t-topbar p {
  margin: 0;
}

.t-topbar-start, .t-topbar-end {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---- Header ---- */
.t-header {
  border-top: 4px solid var(--color-rust);
  background: var(--color-white);
  position: sticky;
  top: 0;
  z-index: var(--z-header); /* see section 1 / section 9 */
  box-shadow: var(--shadow-header);
}

.t-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--height-header);
  gap: 24px;
}

.t-logo {
  display: flex;
  align-items: center;
}

/* Logo is 266x79 (3.37:1). Drive the size from max-height and let the width follow,
   rather than fixing height. The global img{max-width:100%} reset squeezes
   the WIDTH when the header flex row runs out of room on a small phone; with
   a fixed height that squeeze renders as a horizontally squashed logo. With
   height:auto the image scales proportionally instead and simply gets smaller. */
.t-logo img {
  height: auto;
  max-height: 58px;
  width: auto;
  max-width: 100%;
}

.t-logo a {
  display: inline-flex;
  align-items: center;
}

.t-header-end {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---- Main navigation (module output) ---- */
.t-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
}
.t-nav li {
  margin: 0;
}
.t-nav a {
  font-family: var(--font-menu);
  font-weight: var(--fw-600);
  font-size: var(--fs-400);
  color: var(--color-ink);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.t-nav a:hover, .t-nav .active > a, .t-nav .current > a {
  color: var(--color-rust);
  border-color: var(--color-rust);
}
.t-nav li {
  position: relative;
}
.t-nav {
  /* nested dropdowns — shown on hover OR keyboard focus (no click needed) */
}
.t-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: block; /* kept in the DOM; toggled via visibility */
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--br-std);
  padding: 8px 0;
  min-width: 210px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: var(--z-dropdown);
}
.t-nav li:hover > ul,
.t-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.t-nav ul ul a {
  padding: 8px 18px;
  border: 0;
  display: block;
}
.t-nav ul ul li {
  width: 100%;
}

/* ---- Hamburger toggle ---- */
.t-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  cursor: pointer;
}
.t-nav-toggle span {
  display: block;
  height: 3px;
  width: 26px;
  background: var(--color-blue-dark);
  border-radius: 2px;
  transition: var(--transition);
}

/* ---- Responsive: tablet ----
   The top bar is hidden below 560px but visible on everything above it,
   where --fs-300 (0.85rem) is uncomfortably small on a hand-held screen.
   Bring it up to body size and let it centre once it wraps to two rows.
   */
@media only screen and (max-width: 900px) {
  .t-topbar {
    font-size: var(--fs-400);
  }
  .t-topbar .t-wrap {
    justify-content: center;
    min-height: 0;
    padding-block: 8px;
    gap: 4px 16px;
  }
  .t-topbar-start, .t-topbar-end {
    gap: 14px;
  }
}
/* ---- Responsive: mobile nav ---- */
@media only screen and (max-width: 560px) {
  .t-topbar {
    display: none;
  }
  .t-header-inner {
    min-height: var(--height-header-mobile);
  }
  .t-logo img {
    height: 46px;
  }
  .t-nav-toggle {
    display: flex;
  }
  .t-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .t-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }
  .t-nav {
    /* Drawer items need their own size — inherited desktop --fs-400 reads
       small in a full-width touch list. display:flex + min-height is what
       makes the 48px tap target real; padding alone doesn't guarantee it.
       */
  }
  .t-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: var(--fs-500);
    padding: 12px var(--space-gutter);
    border: 0;
    border-bottom: 1px solid var(--color-line);
  }
  .t-nav ul ul {
    position: static;
    display: block;
    box-shadow: none;
    padding: 0 0 0 16px;
  }
  .t-nav {
    /* Re-state display/align here: the desktop `ul ul a` rule above is
       (0,1,3) and would otherwise keep display:block, which leaves the
       label sitting at the top of the 44px box instead of centred.
       */
  }
  .t-nav ul ul a {
    display: flex;
    align-items: center;
    font-size: var(--fs-400);
    min-height: 44px;
  }
  .t-nav-open .t-nav {
    max-height: 80vh;
    overflow: auto;
  }
}

/* ==================================================================
   4. HOME LAYOUT  (hero, features, cards, stats, CTA)
   ================================================================== */

/* =============================================================
   PCOM 2026 — HOME layout positions
   hero · feature · sub-feature · call-to-action
   =============================================================
   */
/* ---- Hero ---- */
.t-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, var(--color-blue-dark) 0%, #06506f 55%, #0a6a8f 100%);
  color: var(--color-white);
}
.t-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67, 168, 222, 0.35), transparent 70%);
  pointer-events: none;
}
.t-hero {
  /* content comes from modules; give it sensible defaults */
}
.t-hero > .mod-wrapper, .t-hero > div, .t-hero .t-wrap {
  position: relative;
  max-width: var(--width-boxed);
  margin: 0 auto;
  padding: 92px var(--space-gutter);
}
.t-hero h1, .t-hero h2, .t-hero h3 {
  color: var(--color-white);
}
.t-hero h1 {
  font-size: var(--fs-1600);
  font-weight: var(--fw-700);
  line-height: var(--flh-1600);
  margin-bottom: 0.4em;
}
.t-hero p {
  font-size: var(--fs-500);
  color: #d6ecf7;
  max-width: 34em;
}
.t-hero .t-eyebrow {
  color: #7fd0f5;
}
.t-hero .t-btn-primary {
  background: var(--color-rust);
}

/* Optional helper for hero content placed in a Custom HTML module */
.t-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 1.6em;
}

/* ---- Section heading (centered eyebrow + title + intro) ---- */
.t-sec-head {
  text-align: center;
  max-width: 42em;
  margin: 0 auto 52px;
}
.t-sec-head h2 {
  font-size: var(--fs-1200);
  font-weight: var(--fw-700);
  margin: 0.3em 0;
}
.t-sec-head p {
  color: var(--color-grey-light);
  font-size: var(--fs-500);
  margin: 0;
}

/* ---- Feature (card grid) ---- */
.t-feature {
  background: var(--color-blue-faint);
}

.t-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.t-card {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--br-large);
  padding: 34px 30px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.t-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.t-card .t-card-title {
  color: var(--color-blue-dark);
  font-size: var(--fs-700);
  margin-bottom: 0.4em;
}
.t-card .t-card-body {
  color: var(--color-grey-light);
}
.t-card p:last-child {
  margin-bottom: 0;
}

/* ---- Sub-feature ---- */
.t-subfeature .t-wrap {
  max-width: var(--width-boxed);
}
.t-subfeature h2 {
  font-size: var(--fs-1200);
  font-weight: var(--fw-700);
}

/* ---- Call to action ---- */
.t-cta {
  background: var(--color-rust);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-section) 0;
}
.t-cta h2 {
  color: var(--color-white);
  font-size: var(--fs-1200);
  font-weight: var(--fw-700);
}
.t-cta p {
  max-width: 36em;
  margin: 0.6em auto 1.6em;
  color: #f6e7df;
  font-size: var(--fs-500);
}
.t-cta .t-btn {
  background: var(--color-white);
  color: var(--color-rust);
}
.t-cta .t-btn:hover {
  background: var(--color-blue-dark);
  color: var(--color-white);
}
.t-cta a:not(.t-btn) {
  color: var(--color-white);
  text-decoration: underline;
}

.t-main-home {
  padding: 0;
}

/* =============================================================
   Content helpers — used by the Custom HTML module snippets so
   hero / feature / sub-feature content matches the design without
   inline styles. (See /module-content/.)
   =============================================================
   */
/* ---- Hero content ---- */
.t-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

.t-hero-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--br-large);
  padding: 30px;
}
.t-hero-card h3 {
  color: var(--color-white);
  font-size: var(--fs-700);
  margin-bottom: 0.4em;
}

.t-hero-list {
  list-style: none;
  margin: 0;
}
.t-hero-list li {
  padding: 9px 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #eaf6fc;
}
.t-hero-list li:last-child {
  border-bottom: 0;
}
.t-hero-list li::before {
  content: "›";
  color: var(--color-rust);
  font-weight: var(--fw-800);
  margin-right: 12px;
}

/* ---- Feature card icon ---- */
/* Was a hard-coded 26px; normalised onto the scale (--fs-700 = 1.5rem = 24px). */
.t-card-ico {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--color-rust-faint);
  color: var(--color-rust);
  display: grid;
  place-items: center;
  font-size: var(--fs-700);
  font-weight: var(--fw-800);
  margin-bottom: 18px;
}

/* ---- Sub-feature split (media + copy) ---- */
.t-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.t-split-media {
  background: linear-gradient(135deg, var(--color-rust), var(--color-rust-dark));
  border-radius: var(--br-large);
  min-height: 340px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  font-weight: var(--fw-700);
  font-size: var(--fs-700);
  text-align: center;
  padding: 30px;
}

.t-check {
  list-style: none;
  margin: 18px 0;
}
.t-check li {
  padding: 8px 0 8px 30px;
  position: relative;
  margin: 0;
}
.t-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-rust);
  font-weight: var(--fw-800);
}

/* ---- Responsive ---- */
@media only screen and (max-width: 900px) {
  .t-feature-grid {
    grid-template-columns: 1fr;
  }
  .t-hero > .t-wrap, .t-hero > div {
    padding: 56px var(--space-gutter);
  }
  .t-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .t-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media only screen and (max-width: 560px) {
  .t-hero h1 {
    font-size: var(--fs-900);
  }
}

/* ==================================================================
   5. DEFAULT LAYOUT  (page head, content/sidebar grid, modules)
   ================================================================== */

/* =============================================================
   PCOM 2026 — DEFAULT layout
   page banner · main content · optional left/right sidebars
   =============================================================
   */
/* ---- Page banner ---- */
.t-page-banner {
  background: linear-gradient(120deg, var(--color-blue-dark), #06506f);
  color: var(--color-white);
  padding: 54px 0;
}
.t-page-banner .t-page-title {
  color: var(--color-white);
  font-size: var(--fs-1200);
  font-weight: var(--fw-700);
  margin: 0;
}
.t-page-banner .t-crumbs {
  font-size: var(--fs-300);
  color: #9fc7df;
  margin-top: 8px;
}
.t-page-banner .t-crumbs a {
  color: #9fc7df;
}
.t-page-banner .t-crumbs a:hover {
  color: var(--color-white);
}

/* ---- Layout grid (sidebars are optional & collapse when empty) ---- */
.t-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 56px 0;
}
.t-layout.t-has-l {
  grid-template-columns: 235px minmax(0, 1fr);
}
.t-layout.t-has-r {
  grid-template-columns: minmax(0, 1fr) 235px;
}
.t-layout.t-has-lr {
  grid-template-columns: 235px minmax(0, 1fr) 235px;
}

/* ---- Sidebars (minimalist) ---- */
.t-sidebar {
  font-size: var(--fs-400);
}

.t-module {
  background: var(--color-blue-faint);
  border: 1px solid #d4e9f4;
  border-radius: var(--br-large);
  padding: 22px;
  margin-bottom: 24px;
}
.t-module .t-module-title {
  color: var(--color-blue-dark);
  font-size: var(--fs-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-rust);
  display: inline-block;
}
.t-module ul {
  list-style: none;
  margin: 0;
}
.t-module li {
  padding: 7px 0;
  margin: 0;
  border-bottom: 1px dashed #cfe2ee;
}
.t-module li:last-child {
  border-bottom: 0;
}
.t-module a {
  color: var(--color-blue-dark);
}
.t-module a:hover {
  color: var(--color-rust);
}

/* ---- Main content ---- */
.t-main h2 {
  color: var(--color-blue-med);
  margin: 1.4em 0 0.5em;
}
.t-main h2:first-child {
  margin-top: 0;
}
.t-main h3 {
  color: var(--color-blue-dark);
}
.t-main p {
  color: #33414e;
}
.t-main a {
  color: var(--color-rust);
}

/* ---- Responsive ---- */
@media only screen and (max-width: 1280px) {
  .t-layout.t-has-lr {
    grid-template-columns: minmax(0, 1fr) 235px;
  }
  .t-layout.t-has-lr .t-sidebar-left {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  .t-layout,
  .t-layout.t-has-l,
  .t-layout.t-has-r,
  .t-layout.t-has-lr {
    grid-template-columns: 1fr;
  }
  .t-sidebar {
    order: 2;
  }
  .t-layout.t-has-lr .t-sidebar-left {
    display: block;
  }
}

/* ==================================================================
   6. CONTENT HELPERS  (reusable grid/row/stack classes)
   ================================================================== */

/* =============================================================
   PCOM 2026 — general content classes (site-wide, reusable)

   A library of reusable STRUCTURAL classes you can use on ANY
   content page — just add the class in an article or a Custom
   HTML module. No per-page setup, no Joomla "Page Class" needed.

   Namespaced with `.c-` (content) so these never collide with the
   template's own `.t-` region classes. Add your own below following
   the same pattern: keep values in CSS variables (section 1) and
   write the media query out longhand, e.g.
   @media only screen and (max-width: 900px).
   =============================================================
   */
/* ---- Responsive column grids -------------------------------------
   <div class="c-grid c-grid--3"> … cells … </div>
   Collapses automatically: 4/3-up → 2-up on tablet → 1-up on phone.
   */
.c-grid {
  display: grid;
  gap: var(--space-gutter);
  grid-template-columns: 1fr;
}

.c-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.c-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Auto: as many equal columns as fit, each at least 240px wide. */
.c-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media only screen and (max-width: 900px) {
  .c-grid--3,
  .c-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media only screen and (max-width: 560px) {
  .c-grid--2,
  .c-grid--3,
  .c-grid--4 {
    grid-template-columns: 1fr;
  }
}
/* ---- Flex row ----------------------------------------------------
   <div class="c-row c-row--middle"> … </div>  — items keep their
   own width; wraps on small screens.
   */
.c-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gutter);
}

.c-row--middle {
  align-items: center;
}

.c-row--between {
  justify-content: space-between;
}

.c-row--center {
  justify-content: center;
}

/* Add c-row--equal to make every child share the width equally. */
.c-row--equal > * {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Vertical spacing (stack) ------------------------------------
   <div class="c-stack"> … blocks get even vertical rhythm … </div>
   */
.c-stack > * + * {
  margin-top: 1rem;
}

.c-stack--lg > * + * {
  margin-top: 2rem;
}

/* ---- Width helpers ----------------------------------------------- */
.c-narrow {
  max-width: 70ch;
  margin-inline: auto;
} /* readable text column */
.c-center {
  text-align: center;
}

/* ---- Add new reusable structural classes below ------------------- */

/* ==================================================================
   7. FOOTER
   ================================================================== */

/* =============================================================
   PCOM 2026 — footer
   =============================================================
   */
.t-footer {
  background: var(--color-blue-dark);
  color: #b9d2e0;
  padding: 64px 0 0;
  margin-top: 0;
  font-size: var(--fs-400);
}
.t-footer a {
  color: #b9d2e0;
}
.t-footer a:hover {
  color: var(--color-blue-med);
}

.t-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
}

.t-footer-module .t-footer-title {
  color: var(--color-white);
  font-size: var(--fs-500);
  margin-bottom: 16px;
}
.t-footer-module ul {
  list-style: none;
  margin: 0;
}
.t-footer-module li {
  margin: 0;
}
.t-footer-module .t-footer-body a {
  display: block;
  padding: 5px 0;
}

/* Footer logo — sits at the top of column 1, above the "about" block */
.t-footer-logo {
  margin-bottom: 18px;
}

.t-footer-logo:empty {
  display: none;
}

.t-footer-logo img {
  height: 46px;
  width: auto;
}

/* Bottom bar */
.t-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
}

.t-footer-meta {
  font-size: var(--fs-300);
  color: #8fb0c2;
}

/* Copyright (left) / credit (right) split — lives inside the footer-bar module */
.t-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

@media only screen and (max-width: 900px) {
  .t-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 560px) {
  .t-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .t-footer-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==================================================================
   8. SYSTEM PAGES  (offline, error)
   ================================================================== */

/* =============================================================
   PCOM 2026 — system pages (error, offline) + Joomla helpers
   =============================================================
   */
/* ---- Error page ---- */
.t-error {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.t-error-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 60px 0;
}

.t-error-box {
  text-align: center;
  max-width: 36em;
}

.t-error-code {
  font-size: var(--fs-error-code);
  font-weight: var(--fw-800);
  line-height: 1;
  color: var(--color-rust);
  font-family: var(--font-head);
}

.t-error-title {
  color: var(--color-blue-dark);
}

.t-error-msg {
  color: var(--color-grey-light);
  margin-bottom: 1.6em;
}

.t-error-footer {
  padding: 28px 0;
  margin-top: auto;
}

/* ---- Offline page ---- */
.t-offline {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--color-blue-faint);
}

.t-offline-box {
  background: var(--color-white);
  border-radius: var(--br-large);
  box-shadow: var(--shadow-card);
  padding: 48px;
  max-width: 440px;
  width: calc(100% - 32px);
  text-align: center;
}

.t-offline-logo {
  height: 56px;
  width: auto;
  margin: 0 auto 24px;
}

.t-offline-msg {
  color: var(--color-grey-light);
  margin-bottom: 1.4em;
}

.t-offline-form {
  text-align: left;
}

.t-field {
  margin-bottom: 16px;
}

.t-field label {
  display: block;
  font-weight: var(--fw-600);
  margin-bottom: 6px;
  font-size: var(--fs-300);
}

.t-field input {
  width: 100%;
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-line);
  border-radius: var(--br-std);
  font-family: var(--font-body);
  font-size: var(--fs-400);
}

.t-field input:focus {
  outline: 2px solid var(--color-blue-med);
  border-color: var(--color-blue-med);
}

/* ---- Joomla system message ---- */
.t-main .alert, .t-main-home .alert {
  border-left: 4px solid var(--color-blue-med);
  background: var(--color-blue-faint);
  padding: 14px 18px;
  border-radius: var(--br-std);
  margin-bottom: 1.2em;
}

.alert-danger {
  border-left-color: var(--color-rust) !important;
  background: var(--color-rust-faint) !important;
}

.alert-success {
  border-left-color: var(--color-success) !important;
}

/* Print */
@media print {
  .t-topbar, .t-header, .t-footer, .t-nav-toggle, .t-cta {
    display: none !important;
  }
}


/* ==================================================================
   8.5. MISC INTERNAL TABS
   ================================================================== */

/* =============================================================
   PCOM 2026 — misc content-level tag styling

 */
#mod-custom219 {
  margin: 1rem auto;
  padding: 0;
  text-align:center;
}

.t-hero #mod-custom219 p {
  max-width: 100%;
  
}
.feature-alert {
  background-color: red;
  color: var(--color-white);
  font-size: var(--fs-500);
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 1em;
  border-radius: 8px;
  font-weight: bold;
}

#mod-custom207 {
  padding:  2rem var(--space-gutter);
}




/* ==================================================================
   9. STACKING / Z-INDEX  (must stay LAST)
   ================================================================== */

/* =============================================================
   PCOM 2026 — stacking / layering rules

   WHY THIS FILE EXISTS
   The site header is `position: sticky` and must stay on top of, and
   clickable above, everything that scrolls under it. Module content is
   written by other people — third-party extensions, page builders and
   HTML pasted into a Custom module routinely carry `z-index: 999` or
   `9999`. Raising the header's own z-index alone is an arms race you
   eventually lose.

   THE FIX (two layers of defence)
   1. The header sits at var(--z-header) = 1000, well above ordinary
   module CSS (see section 3 / section 1).
   2. Every region that renders module or component output gets
   `isolation: isolate`. That makes the region its own stacking
   context, so a `z-index: 99999` inside a module only competes with
   its siblings *inside that region* — the whole region still paints
   below the header. This is what makes the fix permanent.

   ESCAPE HATCH
   If a module legitimately needs to cover the whole viewport (a
   lightbox, cookie bar, off-canvas panel), give any element inside it
   the class `t-overlay-escape`. Its region stops isolating, and the
   module's own z-index applies again — use var(--z-overlay) (1100) so
   it lands above the header rather than under it.
   =============================================================
   */
/* Regions that render module / component output.
   Keep this list in sync with the regions in index.php.
   */
.t-topbar,
.t-hero,
.t-feature,
.t-subfeature,
.t-cta,
.t-page-banner,
.t-layout,
.t-sidebar,
.t-main,
.t-main-home,
.t-footer {
  isolation: isolate;
}

/* Opt out per region when a module inside it must overlay the page. */
:is(.t-topbar,
.t-hero,
.t-feature,
.t-subfeature,
.t-cta,
.t-page-banner,
.t-layout,
.t-sidebar,
.t-main,
.t-main-home,
.t-footer):has(.t-overlay-escape) {
  isolation: auto;
}

/* Helper for content that has opted out: put it above the header on purpose. */
.t-overlay-escape {
  z-index: var(--z-overlay);
}