/* ======================================================
   ROOTS N PERMACULTURE
   Cassiopeia Child Template – Clean & Contemporary
   Font Scheme: Spectral (headings) · Raleway (nav) · Outfit (body)
   Version: 3.2

   CHANGELOG:
   v3.2 — Fixing the "our learning garden menu colour"
   v3.1 — Section 26: Replaced old single-image carousel styles
          with RNP Filmstrip Gallery — horizontal scrollable
          thumbnail strip with GLightbox click-to-enlarge.
          Gold scrollbar, hover border, label bar, captions.
          Section 27: Mini card grid consistency fixes retained
          and renumbered from v3.0 Section 26.
          Section 13b: :not() selector updated to exclude
          .rnp-filmstrip-thumb instead of .rnp-carousel-slide.
          Removed old Section 27 (black dropdown override) and
          old Section 28 (single-image carousel) as both are
          superseded.

   v3.0 — Section 13b: Fixed invalid :not() selector.
          Section 24: Fixed sidebar submenu text colour from
          near-white #f0f0f0 to dark green #2c4a2c.
          Section 28: Added single-image carousel styles
          (now replaced in v3.1 by filmstrip).

   v2.9 — Section 26: Mini card layout refinements.
   v2.8 — Section 25: Added JEvents Latest Events module styles.
   v2.7 — Section 24: Added sidebar-right navigation styles.
   v2.6 — Section 23: Added contact form styles.
   v2.5 — Section 22: Added blockquote styles.
   v2.4 — Section 21: Added .rnp-testimonials styles.
   v2.3 — Section 15: Added display:none to .rnp-result-count.
   v2.2 — Section 15: Added display:none to .rnp-blog-hero.
   v2.1 — Section 15: Added .rnp-blog-hero:empty { display: none }.

   HOW TO EDIT:
   - This file lives at: /templates/cassiopeia/css/user.css
   - Changes here override Cassiopeia defaults without
     touching core template files.
   - Google Fonts are loaded in Section 0 below via @import.
   - To swap a font, change the @import URL AND the
     font-family value in the relevant section.
   ====================================================== */


/* ======================================================
   0. GOOGLE FONTS
   Import all three fonts used in this theme:
     · Spectral       — elegant screen serif for headings
     · Raleway        — wide-tracked sans for navigation
     · Outfit         — clean geometric sans for body text
   ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,600;0,700;1,400&family=Raleway:wght@400;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');


/* ======================================================
   1. BRAND VARIABLES
   Central place to change colours site-wide.
   Edit values here and they cascade everywhere below.
   ====================================================== */
:root {
  /* Header background — deep forest green */
  --rnp-header-dark: #102415;

  /* Gold accent — used for borders, hover highlights, tagline */
  --rnp-gold: #D4952A;

  /* Page background — warm off-white parchment */
  --rnp-parchment: #F5F8F2;

  /* Main body text colour */
  --rnp-text: #202820;

  /* Heading colour — very dark forest green */
  --rnp-heading: #182810;

  /* H2 left-border accent — mid green */
  --rnp-h2-border: #5a9e30;

  /* Subheading (H3) colour — lighter green */
  --rnp-h3-color: #4a7e28;

  /* Link colours */
  --rnp-link: #2C5F2D;
  --rnp-link-hover: #1A3A1C;

  /* Override Cassiopeia's own colour variables */
  --cassiopeia-color-primary: #102415 !important;
  --cassiopeia-color-link: #2C5F2D !important;
  --cassiopeia-color-hover: #D4952A !important;
}


/* ======================================================
   2. GLOBAL BODY
   Sets the page background, default text colour,
   and body font (Outfit — clean geometric sans-serif).
   line-height 1.85 gives comfortable reading spacing.
   ====================================================== */
body {
  background-color: var(--rnp-parchment) !important;
  color: var(--rnp-text);
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.85;
}


/* ======================================================
   3. REMOVE ALL CASSIOPEIA GRADIENTS
   Cassiopeia adds gradient backgrounds to the header
   by default. This forces a clean flat colour instead.
   ====================================================== */
.bg-primary,
.header,
.container-header,
.container-header.full-width {
  background: var(--rnp-header-dark) !important;
  background-image: none !important;
  background-color: var(--rnp-header-dark) !important;
}


/* ======================================================
   4. HEADER STYLING
   Gold bottom border gives the header a grounded,
   defined base. Adjust padding to control logo spacing.
   ====================================================== */
.container-header {
  border-bottom: 4px solid var(--rnp-gold) !important;
  padding-top: 6px;
  padding-bottom: 6px;
}


/* ======================================================
   5. LOGO CONTROL
   Prevents the logo from distorting at different
   screen sizes. max-height controls how tall it appears.
   Increase max-height (e.g. 120px) to make it bigger.
   ====================================================== */
.navbar-brand img,
.brand-logo img {
  max-height: 70px !important;
  height: auto !important;
  width: auto !important;
  max-width: 400px !important;
  object-fit: contain;
  display: block;
}


/* ======================================================
   6. NAVIGATION — PRIMARY NAV LINKS
   ====================================================== */
ul.mod-menu > li.nav-item > a,
ul.mod-menu > li.nav-item > .nav-link {
  color: #e4dfc8 !important;
  font-family: "Raleway", sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 8px 10px !important;
  transition: color 0.2s ease;
  text-decoration: none;
}

ul.mod-menu > li.nav-item > a:hover,
ul.mod-menu > li.nav-item > a:focus {
  color: var(--rnp-gold) !important;
}

ul.mod-menu > li.nav-item.current > a,
ul.mod-menu > li.nav-item.active > a {
  color: var(--rnp-gold) !important;
}

.navbar-nav .nav-link {
  color: #e4dfc8 !important;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 10px !important;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--rnp-gold) !important;
}

.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .current-menu-item > .nav-link {
  color: var(--rnp-gold) !important;
}

.mod-menu__toggle-sub {
  background: transparent !important;
  border: none !important;
  color: #e4dfc8 !important;
  padding: 8px 4px !important;
  font-size: 10px !important;
}

.mod-menu__toggle-sub:hover {
  color: var(--rnp-gold) !important;
}


/* ======================================================
   6b. NAVIGATION — DROPDOWN MENUS
   ====================================================== */
ul.mod-menu__sub {
  background-color: #162812 !important;
  background: #162812 !important;
  border-top: 3px solid var(--rnp-gold) !important;
  border-bottom: 2px solid #5a9e30 !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: 4px 8px 24px rgba(0, 0, 0, 0.5) !important;
  padding: 0 !important;
  min-width: 220px !important;
}

ul.mod-menu__sub li {
  border-bottom: 1px solid rgba(90, 158, 48, 0.2) !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.mod-menu__sub li a {
  font-family: "Raleway", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: #c8e098 !important;
  padding: 11px 16px !important;
  display: block !important;
  background-color: transparent !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}

ul.mod-menu__sub li a:hover,
ul.mod-menu__sub li a:focus {
  background-color: rgba(90, 158, 48, 0.2) !important;
  color: var(--rnp-gold) !important;
  text-decoration: none !important;
}

ul.mod-menu__sub ul.mod-menu__sub {
  border-top: none !important;
  border-left: 3px solid #5a9e30 !important;
  background-color: #0e1c0c !important;
  background: #0e1c0c !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  min-width: 210px !important;
}


/* ======================================================
   7. TYPOGRAPHY — HEADINGS
   ====================================================== */
h1, .article-header h1, .page-header h1 {
  font-family: "Spectral", serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--rnp-heading);
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin-bottom: 0.4rem;
}

h1 {
  border-bottom: 5px solid var(--rnp-gold);
  padding-bottom: 14px;
  margin-bottom: 24px;
}

h2 {
  font-family: "Spectral", serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #243818;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-left: 14px;
  border-left: 4px solid var(--rnp-h2-border);
}

h3 {
  font-family: "Raleway", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rnp-h3-color);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

h4, h5, h6 {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  color: var(--rnp-heading);
  margin-bottom: 0.5rem;
}


/* ======================================================
   7b. HOMEPAGE MODULE HEADINGS
   Prevents global h1/h2/h3 rules from overriding the
   inline styles in Custom HTML modules on the home page.
   ====================================================== */
.home .mod-custom h1,
.home .mod-custom h2 {
  font-family: "Spectral", serif;
  border-bottom: none !important;
  border-left: none !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0;
}

.home .mod-custom h3 {
  font-family: "Spectral", serif;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin-top: 0;
}


/* ======================================================
   7c. HIDE HOME PAGE ARTICLE HEADING
   Targets the blank article heading on the home page.
   Uses itemid-101 body class instead of .home since
   Joomla 6 does not add a .home class automatically.
   ====================================================== */
.itemid-101 .page-header,
.itemid-101 .com-content-article .page-header {
  display: none;
}


/* ======================================================
   8. BODY TEXT & PARAGRAPHS
   ====================================================== */
p {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--rnp-text);
  margin-bottom: 1rem;
}

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}


/* ======================================================
   9. LINKS
   ====================================================== */
a {
  color: var(--rnp-link);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--rnp-link-hover);
  text-decoration: underline;
}


/* ======================================================
   10. TAGLINE UNDER LOGO
   ====================================================== */
.navbar-brand + .navbar-text,
.site-description,
.container-header .site-description {
  display: block;
  width: 100%;
  text-align: left;
  font-family: "Raleway", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rnp-gold) !important;
  margin-top: 6px;
  margin-bottom: 0;
  opacity: 0.9;
}


/* ======================================================
   11. BREADCRUMBS
   ====================================================== */
.breadcrumb {
  font-family: "Raleway", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 1.2rem;
}

.breadcrumb-item a {
  color: var(--rnp-h3-color);
}

.breadcrumb-item.active {
  color: #888;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #aaa;
}


/* ======================================================
   12. HEADER SOCIAL MEDIA ICONS
   ====================================================== */
.header-social {
  display: flex;
  align-items: center;
}

.header-social a {
  font-size: 20px;
  margin-left: 14px;
  color: #c0dc90;
  text-decoration: none;
  transition: color 0.2s;
}

.header-social a:hover {
  color: var(--rnp-gold);
}


/* ======================================================
   13. ARTICLE / CONTENT AREA
   ====================================================== */
.article-body,
.com-content-article__body,
.item-page .article-body {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--rnp-text);
}


/* ======================================================
   13a. HERO IMAGE — Full Article Image
   ====================================================== */
.pc-hero-image {
  width: 100%;
  margin: 0 0 2rem 0;
  float: none !important;
}

.pc-hero-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}


/* ======================================================
   13b. ARTICLE IMAGES
   The :not(.rnp-filmstrip-thumb) exclusion prevents the
   70% width rule from overriding filmstrip thumbnail sizes,
   which are controlled explicitly in Section 26.
   ====================================================== */
.full-image,
.article-fullimg,
.com-content-article__image--full,
img.full {
  display: block !important;
  width: 90% !important;
  max-width: 90% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.5rem;
}

.article-body img:not(.rnp-filmstrip-thumb),
.com-content-article__body img:not(.rnp-filmstrip-thumb),
.item-page .article-body img:not(.rnp-filmstrip-thumb) {
  display: block !important;
  width: 70% !important;
  max-width: 70% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 1.2rem;
}

.article-body .full-image,
.article-body img.full,
.com-content-article__body .full-image,
.com-content-article__body img.full {
  width: 90% !important;
  max-width: 90% !important;
}

@media (max-width: 640px) {
  .full-image,
  .article-fullimg,
  .com-content-article__image--full,
  img.full,
  .article-body img:not(.rnp-filmstrip-thumb),
  .com-content-article__body img:not(.rnp-filmstrip-thumb),
  .item-page .article-body img:not(.rnp-filmstrip-thumb) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pc-hero-image img {
    width: 100% !important;
  }
}


/* ======================================================
   13c. FIGURES & FIGCAPTIONS
   ====================================================== */
figure {
  margin: 1.5rem 0;
  padding: 0;
}

figure.pc-image-full {
  display: block;
  text-align: center;
}

figure.pc-image-full figcaption {
  display: inline-block;
  width: 70%;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.5px;
  color: var(--rnp-h3-color, #4a7e28);
  padding: 5px 0 0 0;
  margin: 0;
  text-align: left;
  line-height: 1.4;
}

.pc-gallery figure {
  display: block;
  width: 100%;
  margin: 0;
}

.pc-gallery figcaption {
  display: block;
  width: 100%;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.5px;
  color: var(--rnp-h3-color, #4a7e28);
  padding: 5px 0 0 0;
  margin: 0;
  text-align: left;
  line-height: 1.4;
}


/* ======================================================
   14. BUTTONS
   ====================================================== */
.btn-primary {
  background-color: var(--rnp-link) !important;
  border-color: var(--rnp-link) !important;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--rnp-link-hover) !important;
  border-color: var(--rnp-gold) !important;
}


/* ======================================================
   15. CATEGORY BLOG — ARTICLE CARDS
   ====================================================== */

/* Hero block is hidden by default as it is currently unused.
   To activate it on a specific category page, add a rule
   targeting that page's body itemid class, for example:
   .itemid-234 .rnp-blog-hero { display: block; }        */
.rnp-blog-hero {
  display: none;
  background: var(--rnp-header-dark);
  background-image: radial-gradient(ellipse at 70% 50%, rgba(212,149,42,.10) 0%, transparent 60%);
  padding: 48px 40px 40px;
  text-align: center;
  border-bottom: 3px solid var(--rnp-gold);
  margin-bottom: 0;
}

.rnp-blog-hero__title {
  font-family: "Spectral", serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  color: #fff;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px;
}

.rnp-blog-hero__title em {
  font-style: italic;
  color: var(--rnp-gold);
}

.rnp-blog-hero__desc {
  color: rgba(255,255,255,.65);
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 300;
}

.rnp-blog-hero__desc p {
  color: rgba(255,255,255,.65);
  margin-bottom: 0;
}

.rnp-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 20px;
  border-bottom: 1px solid #ddd8cc;
  margin-bottom: 28px;
}

/* HIDE ARTICLE COUNTER ON CATEGORY BLOG PAGES
   The counter was showing "2 COM_CONTENT_ARTICLES" due to a missing
   Joomla language string. Hiding it provides a cleaner interface
   across all category pages without needing language overrides. */
.rnp-result-count {
  display: none;
}

.rnp-view-toggle {
  display: flex;
  gap: 6px;
}

.rnp-vt-btn {
  background: none;
  border: 1px solid #ddd8cc;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
  color: #6b7c6b;
  display: flex;
  align-items: center;
  transition: all .2s;
  line-height: 1;
}

.rnp-vt-btn.active,
.rnp-vt-btn:hover {
  background: var(--rnp-header-dark);
  border-color: var(--rnp-header-dark);
  color: var(--rnp-gold);
}

.rnp-lead-items {
  margin-bottom: 32px;
}

.rnp-lead-item .rnp-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
  border: 1px solid #ddd8cc;
  background: #fff;
  transition: box-shadow .3s;
}

.rnp-lead-item .rnp-card:hover {
  box-shadow: 0 8px 40px rgba(0,0,0,.13);
}

.rnp-lead-item .rnp-card__img-wrap {
  display: block;
  min-height: 320px;
}

.rnp-lead-item .rnp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rnp-lead-item .rnp-card__img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, var(--rnp-header-dark) 0%, #3d6b3d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rnp-lead-item .rnp-card__img-placeholder svg {
  width: 120px;
}

.rnp-lead-item .rnp-card__body {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rnp-lead-item .rnp-card__title {
  font-family: "Spectral", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--rnp-heading);
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px;
  margin-top: 0;
}

.rnp-view-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rnp-view-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rnp-intro-item .rnp-card {
  background: #fff;
  border: 1px solid #ddd8cc;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  transition: box-shadow .3s, transform .3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.rnp-intro-item .rnp-card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.11);
  transform: translateY(-3px);
}

.rnp-intro-item .rnp-card__img-wrap {
  display: block;
  height: 185px;
  overflow: hidden;
  flex-shrink: 0;
}

.rnp-intro-item .rnp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.rnp-intro-item .rnp-card:hover .rnp-card__img {
  transform: scale(1.04);
}

.rnp-intro-item .rnp-card__img-placeholder {
  width: 100%;
  height: 185px;
  background: linear-gradient(135deg, #2c4a2c 0%, #4a7c59 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rnp-intro-item .rnp-card__img-placeholder svg {
  width: 64px;
}

.rnp-card__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rnp-card__badge {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rnp-gold);
  border: 1px solid var(--rnp-gold);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
  width: fit-content;
}

.rnp-card__title {
  font-family: "Spectral", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--rnp-heading) !important;
  margin-bottom: 10px !important;
  margin-top: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  border-left: none !important;
  padding-left: 0 !important;
}

.rnp-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.rnp-card__title a:hover {
  color: var(--rnp-gold);
  text-decoration: none;
}

.rnp-card__excerpt {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: #6b7c6b;
  margin-bottom: 0;
  flex: 1;
}

.rnp-card__excerpt p {
  font-size: 14px;
  color: #6b7c6b;
  margin-bottom: 0;
}

.rnp-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  letter-spacing: .5px;
  color: #8a9a8a;
  border-top: 1px solid #ddd8cc;
  padding-top: 14px;
  margin-top: 16px;
}

.rnp-card__meta-sep {
  color: #ddd8cc;
}

.rnp-card__readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--rnp-heading);
  text-decoration: none;
  transition: color .2s;
}

.rnp-card__readmore svg {
  transition: transform .2s;
  flex-shrink: 0;
}

.rnp-card__readmore:hover {
  color: var(--rnp-gold);
  text-decoration: none;
}

.rnp-card__readmore:hover svg {
  transform: translateX(4px);
}

.rnp-view-list .rnp-intro-item .rnp-card {
  flex-direction: row;
  height: auto;
  transform: none !important;
}

.rnp-view-list .rnp-intro-item .rnp-card__img-wrap {
  width: 160px;
  height: auto;
  min-height: 130px;
  flex-shrink: 0;
}

.rnp-view-list .rnp-intro-item .rnp-card__img {
  height: 100%;
}

.rnp-view-list .rnp-intro-item .rnp-card__img-placeholder {
  width: 160px;
  height: 100%;
  min-height: 130px;
}

.rnp-view-list .rnp-intro-item .rnp-card__body {
  padding: 18px 22px;
}

.rnp-lead-list .rnp-lead-item .rnp-card {
  grid-template-columns: 220px 1fr;
}

.rnp-card--unpublished {
  opacity: .7;
  border-color: #e0c0a0 !important;
}

@media (max-width: 992px) {
  .rnp-view-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rnp-lead-item .rnp-card {
    grid-template-columns: 1fr;
  }

  .rnp-lead-item .rnp-card__img-wrap {
    min-height: 220px;
  }

  .rnp-lead-item .rnp-card__body {
    padding: 28px 30px;
  }

  .rnp-blog-hero {
    padding: 36px 24px 32px;
  }
}

@media (max-width: 640px) {
  .rnp-view-grid {
    grid-template-columns: 1fr;
  }

  .rnp-view-list .rnp-intro-item .rnp-card {
    flex-direction: column;
  }

  .rnp-view-list .rnp-intro-item .rnp-card__img-wrap {
    width: 100%;
    height: 160px;
  }

  .rnp-view-list .rnp-intro-item .rnp-card__img-placeholder {
    width: 100%;
    height: 160px;
  }

  .rnp-blog-hero {
    padding: 28px 16px 24px;
  }
}


/* ======================================================
   16. FOOTER
   Override Cassiopeia's default footer background and
   ensure full width layout.
   ====================================================== */
.container-footer,
.footer,
footer.container-footer {
  background: #102415 !important;
  background-image: none !important;
  background-color: #102415 !important;
  padding: 0 !important;
  width: 100% !important;
}

.container-footer .grid-child {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.container-footer .mod-custom {
  width: 100% !important;
}


/* ======================================================
   17. FOUR PILLARS CARD HOVER EFFECT
   ====================================================== */
.four-pillars-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.four-pillars-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}


/* ======================================================
   18. PODCAST CARD HOVER EFFECT
   ====================================================== */
.podcast-card:hover {
  background: #2A4A2C !important;
  border-color: #D4952A !important;
  transform: translateY(-2px);
}


/* ======================================================
   19. FOUR PILLARS — RESPONSIVE GRID
   ====================================================== */
.four-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .four-pillars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .four-pillars-grid {
    grid-template-columns: 1fr;
  }
}


/* ======================================================
   20. RADIO SHOW — RESPONSIVE GRID
   ====================================================== */
.radio-show-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 700px) {
  .radio-show-grid {
    grid-template-columns: 1fr;
  }
}


/* ======================================================
   21. TESTIMONIALS — HOMEPAGE ROTATING BLOCK
   Full-width dark-green section matching the header and
   footer tones. Three quotes fade in sequence with dot
   navigation. Controlled by the rnpTGoTo() JS function
   in the Custom HTML module on the homepage.
   ====================================================== */
.rnp-testimonials {
  background: var(--rnp-header-dark);
  background-image: radial-gradient(ellipse at 30% 50%, rgba(212,149,42,.07) 0%, transparent 60%);
  padding: 64px 24px 56px;
  text-align: center;
  border-top: 1px solid rgba(90,158,48,0.25);
  border-bottom: 1px solid rgba(90,158,48,0.25);
}

.rnp-testimonials__label {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rnp-gold);
  margin-bottom: 16px;
}

.rnp-testimonials__qmark {
  font-family: "Spectral", serif;
  font-size: 72px;
  line-height: 0.6;
  color: var(--rnp-gold);
  opacity: 0.35;
  display: block;
  margin-bottom: 24px;
  user-select: none;
}

.rnp-testimonials__track {
  position: relative;
  min-height: 210px;
  max-width: 720px;
  margin: 0 auto 36px;
}

.rnp-tslide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.rnp-tslide--active {
  opacity: 1;
  pointer-events: auto;
}

.rnp-tslide__quote {
  font-family: "Spectral", serif;
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(250,246,238,0.9);
  margin-bottom: 22px;
}

.rnp-tslide__attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.rnp-tslide__name {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rnp-gold);
}

.rnp-tslide__course {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(200,224,152,0.65);
}

.rnp-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.rnp-tdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(250,246,238,0.35);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.rnp-tdot--active {
  background: var(--rnp-gold);
  border-color: var(--rnp-gold);
}

.rnp-testimonials__link {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(200,224,152,0.75);
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
}

.rnp-testimonials__link:hover {
  color: var(--rnp-gold);
  text-decoration: none;
}

@media (max-width: 640px) {
  .rnp-testimonials {
    padding: 48px 20px 44px;
  }

  .rnp-testimonials__track {
    min-height: 290px;
  }

  .rnp-tslide__quote {
    font-size: 1.05rem;
  }

  .rnp-testimonials__qmark {
    font-size: 56px;
  }
}


/* ======================================================
   22. BLOCKQUOTES — TESTIMONIALS & ARTICLE QUOTES
   Styled for the feedback and testimonials page and any
   article using blockquote elements. Gold left border with
   white card background. Spectral italic for the quote
   text, Raleway uppercase for the cite attribution line.
   ====================================================== */
blockquote {
  background: #fff;
  border-left: 4px solid var(--rnp-gold);
  margin: 0 0 20px 0;
  padding: 20px 26px 18px;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

blockquote p {
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--rnp-heading);
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rnp-gold);
  margin-top: 12px;
  font-style: normal;
}


/* ======================================================
   23. CONTACT FORM — AJAX CONTACT PAGE
   Styles for the new contact form on the Get in Touch page.
   Includes form wrapper, input fields, focus states,
   success/error message boxes, reply note with gold left
   border, submit button styling, and responsive adjustments.
   ====================================================== */
#contact-form-wrapper {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  margin: 2rem 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #ddd8cc;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  font-family: "Raleway", sans-serif;
  color: var(--rnp-heading);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d4c9b0;
  border-radius: 8px;
  background: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--rnp-gold);
  box-shadow: 0 0 0 3px rgba(212, 149, 42, 0.15);
}

#roots-contact-form button {
  background: var(--rnp-link);
  color: white;
  border: none;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: "Raleway", sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

#roots-contact-form button:hover {
  background: var(--rnp-link-hover);
}

#roots-contact-form button:disabled {
  background: #8fa88f;
  cursor: not-allowed;
}

.reply-note {
  background: #e8f0e8;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--rnp-heading);
  border-left: 4px solid var(--rnp-gold);
  font-family: "Outfit", sans-serif;
  line-height: 1.5;
}

.cf-success {
  background: #d4edda;
  color: #155724;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  border-left: 4px solid #155724;
  font-family: "Outfit", sans-serif;
}

.cf-error {
  background: #f8d7da;
  color: #721c24;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  border-left: 4px solid #721c24;
  font-family: "Outfit", sans-serif;
}

@media (max-width: 768px) {
  #contact-form-wrapper {
    padding: 1.25rem;
  }

  .form-group input,
  .form-group textarea {
    padding: 0.6rem 0.85rem;
  }

  #roots-contact-form button {
    width: 100%;
  }
}


/* ======================================================
   24. SIDEBAR — WHAT'S ON NAVIGATION
   Styles for the Related Courses menu module in the
   sidebar-right position on What's On section pages.
   Lightens the default Cassiopeia card background to
   match the parchment palette, forces sub-menu items
   to always display expanded so visitors can see all
   course topics without clicking a toggle, and hides
   the chevron toggle button as it is no longer needed.
   The current page link is highlighted in gold.
   FIX v3.0: Submenu link colour changed from near-white
   #f0f0f0 to dark green #2c4a2c for readability on
   the light parchment card background (#f0f4eb).
   ====================================================== */

/* Card container — light parchment, subtle green border */
.sidebar-right .card {
  background-color: #f0f4eb;
  border: 1px solid #d0e0c0;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Card header — matches the h3 style used elsewhere */
.sidebar-right .card-header {
  background-color: #e4eedd;
  border-bottom: 2px solid var(--rnp-gold);
  font-family: "Raleway", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--rnp-h3-color);
  padding: 12px 16px;
}

/* Top-level links (What We Teach, Courses, Events) */
.sidebar-right .mod-menu .nav-item > a {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rnp-link);
  padding: 8px 4px;
  display: block;
  text-decoration: none;
  transition: color 0.2s;
  border-bottom: 1px solid #dde8d0;
}

.sidebar-right .mod-menu .nav-item > a:hover {
  color: var(--rnp-gold);
  text-decoration: none;
}

/* Sub-menu container — always expanded, no toggle needed */
.sidebar-right .mod-menu__sub {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: unset !important;
  position: static !important;
}

.sidebar-right .mod-menu__sub li {
  border-bottom: none !important;
  padding: 0 !important;
}

/* Dark green text for readability on parchment background */
.sidebar-right .mod-menu__sub li a {
  font-family: "Outfit", sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #2c4a2c !important;
  padding: 5px 0 5px 14px !important;
  border-left: 2px solid #c8ddb0;
  display: block !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 0.2s, border-color 0.2s;
}

.sidebar-right .mod-menu__sub li a:hover {
  color: var(--rnp-gold) !important;
  border-left-color: var(--rnp-gold);
  background: transparent !important;
  text-decoration: none !important;
}

/* Current page highlighted in gold */
.sidebar-right .mod-menu__sub li.current a,
.sidebar-right .mod-menu__sub li.active a {
  color: var(--rnp-gold) !important;
  border-left-color: var(--rnp-gold);
  font-weight: 600 !important;
}

/* Hide the toggle chevron — menu is always expanded */
.sidebar-right .mod-menu__toggle-sub {
  display: none !important;
}


/* ======================================================
   25. COURSES MODULE (JEVENTS LATEST EVENTS)
   Option E — Cream background for the Upcoming Courses
   module on the homepage. This gives the JEvents module
   a consistent background (#FAF6EE) with comfortable
   padding to match the 3-colour rotation scheme.
   Targets the module by its ID (181) and provides
   fallback selectors for the main-bottom position.
   ====================================================== */

/* Primary selector — targets the JEvents module by ID */
#mod_events_latest_181 {
  background-color: #FAF6EE !important;
  padding: 60px 24px !important;
}

/* Inner container styling — centers and constrains content */
#mod_events_latest_181 .mod_events_latest_content {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* Style the event list items for better readability */
#mod_events_latest_181 .mod_events_latest_table td {
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Remove bottom border from the last row */
#mod_events_latest_181 .mod_events_latest_table tr:last-child td {
  border-bottom: none !important;
}

/* Fallback selectors — in case the ID selector doesn't work */
.main-bottom .mod_events_latest {
  background-color: #FAF6EE !important;
  padding: 60px 24px !important;
}

.main-bottom .mod_events_latest .mod_events_latest_content {
  max-width: 800px !important;
  margin: 0 auto !important;
}


/* ======================================================
   26. RNP FILMSTRIP GALLERY
   Horizontal scrollable thumbnail strip built by the
   "RNP Carousel Script" Custom HTML module (position:
   bottom, published on all pages). That module reads
   each .rnp-carousel div in article content and rebuilds
   it as a .rnp-filmstrip-wrap structure at page load.
   GLightbox (loaded by the same module via CDN) handles
   click-to-enlarge overlay.
   To adjust thumbnail size change the four 200px values
   together (and the matching 150px mobile values).
   ====================================================== */

/* Outer wrapper — matches article image width */
.rnp-filmstrip-wrap {
  width: 70%;
  max-width: 70%;
  margin: 0 auto 1.8rem;
}

/* Label bar above the strip — matches site h3 style */
.rnp-filmstrip-label {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--rnp-h3-color);
  background: #eef3e8;
  border-left: 3px solid var(--rnp-gold);
  padding: 6px 12px;
  margin-bottom: 0;
}

/* Scrollable row of thumbnails */
.rnp-filmstrip {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rnp-gold) #eef3e8;
}

.rnp-filmstrip::-webkit-scrollbar {
  height: 5px;
}

.rnp-filmstrip::-webkit-scrollbar-track {
  background: #eef3e8;
}

.rnp-filmstrip::-webkit-scrollbar-thumb {
  background: var(--rnp-gold);
  border-radius: 3px;
}

/* Individual thumbnail + caption anchor */
.rnp-filmstrip-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  cursor: zoom-in;
  width: 200px;
}

/* Thumbnail image — fixed size, cropped to fill */
.rnp-filmstrip-thumb {
  width: 200px !important;
  height: 140px !important;
  max-width: none !important;
  object-fit: cover;
  display: block !important;
  margin: 0 !important;
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
}

.rnp-filmstrip-item:hover .rnp-filmstrip-thumb {
  border-color: var(--rnp-gold);
  transform: translateY(-2px);
}

/* Caption below each thumbnail */
.rnp-filmstrip-caption {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 600;
  font-style: italic;
  color: var(--rnp-h3-color);
  text-align: center;
  padding: 5px 4px 0;
  line-height: 1.3;
  width: 200px;
}




/* TEST Fix sidebar menu contrast - Our Learning Garden */
.sidebar-right .mod-menu__sub li a {
    color: #0f2b0f !important;
}
/* Mobile — slightly smaller thumbnails, full-width strip */
@media (max-width: 640px) {
  .rnp-filmstrip-wrap {
    width: 100%;
    max-width: 100%;
  }

  .rnp-filmstrip-item {
    width: 150px;
  }

  .rnp-filmstrip-thumb {
    width: 150px !important;
    height: 105px !important;
  }

  .rnp-filmstrip-caption {
    width: 150px;
  }
}


/* ======================================================
   27. MINI CARDS — GRID CONSISTENCY FIXES
   Tightens layout, fixes Joomla spacing issues,
   ensures equal heights, and improves image handling.
   ====================================================== */

/* Force consistent card heights */
.rnp-view-grid {
  align-items: stretch;
}

.rnp-intro-item {
  display: flex;
}

.rnp-intro-item .rnp-card {
  width: 100%;
}

/* Fix Joomla paragraph spacing inside excerpts */
.rnp-card__excerpt p {
  margin: 0 !important;
}

.rnp-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Consistent image aspect ratios */
.rnp-intro-item .rnp-card__img-wrap {
  aspect-ratio: 16 / 9;
  height: auto !important;
}

.rnp-intro-item .rnp-card__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Remove Joomla's default blog item spacing */
.blog-item,
.rnp-intro-item {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Tighter grid gap and card padding */
.rnp-view-grid {
  gap: 20px;
}

.rnp-card__body {
  padding: 18px 20px 20px;
}

/* Better title line height */
.rnp-card__title {
  line-height: 1.3 !important;
}

/* Push meta to bottom of card */
.rnp-card__meta {
  margin-top: auto;
}

/* Cleaner hover lift */
.rnp-intro-item .rnp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

@media (max-width: 640px) {
  .rnp-card__body {
    padding: 16px;
  }

  .rnp-card__title {
    font-size: 17px !important;
  }
}

/* ======================================================
   28. FIX OUR LEARNING GARDEN MENU TEXT CONTRAST
   Targets the specific menu structure from Level 3+
   ====================================================== */

/* Target the menu items in Our Learning Garden */
#mod-menu177 li a {
    color: #0f2b0f !important;
    font-weight: 500 !important;
}

/* Hover state */
#mod-menu177 li a:hover {
    color: #D4952A !important;
    text-decoration: none !important;
}

/* Active/current page */
#mod-menu177 li.current a,
#mod-menu177 li.active a {
    color: #D4952A !important;
    font-weight: 700 !important;
}

/* ======================================================
   29. CONTENT TAGS
   ====================================================== */
ul.tags .btn-info {
  background-color: var(--rnp-header-dark) !important;
  border-color: var(--rnp-header-dark) !important;
  color: var(--rnp-gold) !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}

ul.tags .btn-info:hover {
  background-color: var(--rnp-gold) !important;
  border-color: var(--rnp-gold) !important;
  color: var(--rnp-header-dark) !important;
  text-decoration: none !important;
}