/* ================================
   FONTS
=================================== */
@import url('https://fonts.googleapis.com/css2?family=Actor&family=Source+Sans+3:wght@400;600&display=swap');

/* Headings = Actor (with fallbacks) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Actor', 'Arial', 'Helvetica', sans-serif;
  color: #111;
}

/* Body/UI = Source Sans 3 (with fallbacks) */
body, p, li, a, span, div,
.navbar, .navbar a, button, input, textarea {
  font-family: 'Source Sans 3', 'Arial', 'Helvetica', sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #333;
}

/* ================================
   HOMEPAGE CLEANUP
=================================== */
.kc-tagline { text-align: center; margin: 60px 0; }
.kc-tagline h1 {
  font-size: 2.5rem; font-weight: 700; margin: 0.4em 0; opacity: 0;
  animation: fadeInUp 1s ease forwards;
}
.kc-tagline h1:nth-child(1){ animation-delay: .2s; }
.kc-tagline h1:nth-child(2){ animation-delay: .8s; }
.kc-tagline h1:nth-child(3){ animation-delay: 1.4s; }

@keyframes fadeInUp { from { transform: translateY(20px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* Hide stray Home titles/breadcrumbs */
.home .page-title,
.home .page-header h1,
.home .contentheading,
.home h1[itemprop="headline"],
.home .breadcrumb,
.home .breadcrumbs,
.home .pathway,
.home .t3-breadcrumbs,
.home nav.breadcrumbs { display: none !important; }

/* ================================
   LAYOUT UTILITIES
=================================== */
.kc-section { padding: 56px 0; background: #fff; }
.kc-section + .kc-section { border-top: 1px solid #eee; }

.kc-wrap,
.kc-container,
.kc-about-body,
.kc-founder-wrap,
.item-page {
  max-width: 880px;           /* readable line length */
  margin: 0 auto;
  padding: 0 20px;
}

.kc-lede { font-size: 1.125rem; margin-bottom: 12px; }
.kc-list { margin: 0 0 20px 1.2em; }
.kc-list li { margin: 8px 0; }
.kc-note, small { font-size: 0.95rem; color: #555; }

.kc-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.kc-btn {
  display: inline-block; padding: 12px 18px; border-radius: 999px;
  text-decoration: none; border: 2px solid currentColor; font-weight: 600; color:#333;
}
.kc-btn:hover { opacity: 0.9; }
.kc-btn-outline { background: transparent; }

/* ================================
   ABOUT PAGE
=================================== */
.kc-about-page { padding: 40px 0; }
.kc-about-hero { text-align: left; margin: 0 auto 18px; }
.kc-about-hero h1 { font-size: 2rem; margin: 0 0 6px; line-height: 1.2; }
.kc-subtitle { color: #555; margin: 0; font-weight: 500; }
.kc-divider { border: 0; border-top: 1px solid #eee; margin: 24px 0; }

/* Force Joomla article content to left-align */
.item-page, .item-page p, .item-page h1, .item-page h2, .item-page h3,
.item-page h4, .item-page h5, .item-page h6, .item-page ul, .item-page ol {
  text-align: left !important;
}

/* Two-column About (image + text) */
.kc-about-section {
  display: flex; align-items: flex-end; gap: 24px;
  max-width: 1000px; margin: 0 auto; padding: 40px 20px;
}
.kc-about-image img {
  max-width: 360px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.kc-about-text { flex: 1; text-align: left; padding-bottom: 10px; }

@media (max-width: 800px) {
  .kc-about-section { flex-direction: column; align-items: center; text-align: center; }
  .kc-about-image img { margin: 0 auto 20px; }
}

/* ================================
   FOUNDER (simple image via Images & Links)
=================================== */
.item-page .img-fulltext {
  display: block; margin: 0 auto 24px; max-width: 320px;
  border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* Optional soft band if using Page Class 'article-about-founder' */
.item-page.article-about-founder {
  background: #fafafa; padding: 40px 20px; border-radius: 12px;
  max-width: 1000px; margin: 0 auto;
}

/* ================================
   FOUNDER (side-by-side layout variant)
   — Only needed if you’re using the section/grid version
=================================== */
.kc-founder-section { padding: 60px 20px; background: #fafafa; }
.kc-founder-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 48px; max-width: 1200px; margin: 0 auto; flex-wrap: nowrap;
}
.kc-founder-photo {
  position: relative; flex: 0 0 420px; max-width: 420px;
  border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.kc-founder-photo img { width: 100%; height: auto; display: block; }
.kc-photo-overlay { position: absolute; inset: 0; background: rgba(0,124,137,.18); }
.kc-founder-text { flex: 1 1 640px; text-align: left; }
.kc-founder-text h1 { font-size: 2rem; margin: 0 0 16px; }
.kc-founder-text p { margin: 0 0 16px; line-height: 1.65; font-size: 1.05rem; color: #333; }

@media (max-width: 980px) {
  .kc-founder-wrap { flex-direction: column; align-items: center; }
  .kc-founder-photo { flex: 0 1 auto; max-width: 480px; }
  .kc-founder-text { text-align: center; }
}

/* Circle portrait (optional) */
.kc-founder-photo.kc-photo-circle {
  border-radius: 50%; width: 360px; height: 360px; flex: 0 0 360px; max-width: none;
}
.kc-founder-photo.kc-photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.kc-founder-photo.kc-photo-circle .kc-photo-overlay { border-radius: 50%; }

/* ================================
   SERVICES
=================================== */
.kc-services-page { max-width: 960px; margin: 0 auto; padding: 40px 20px; text-align: left; }
.kc-services-hero h1 { font-size: 2.25rem; margin-bottom: .5em; }
.kc-services-list h3 { margin-top: 1em; font-size: 1.35rem; color: #222; }
.kc-service p { margin-bottom: 1em; line-height: 1.6; }
.kc-services-approach ul { margin: 0 0 1.5em 1.25em; }
.kc-services-cta { margin-top: 2em; text-align: center; }

/* Services hero banner */
.kc-hero {
  position: relative; width: 100%; min-height: 50vh;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--hero-img); background-size: cover; background-position: center;
  color: #fff; overflow: hidden;
}
.kc-hero-overlay { position: absolute; inset: 0; background: rgba(0,124,137,.45); }
.kc-hero-inner { position: relative; max-width: 1000px; padding: 40px 20px; text-align: center; }
.kc-hero-inner h1 { font-size: 2.4rem; margin: 0 0 10px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.kc-hero-sub { font-size: 1.15rem; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,.3); }

@media (max-width: 992px){
  .kc-hero { min-height: 44vh; }
  .kc-hero-inner h1 { font-size: 2rem; }
  .kc-hero-sub { font-size: 1.05rem; }
}
@media (max-width: 600px){
  .kc-hero { min-height: 38vh; }
  .kc-hero-inner { padding: 28px 16px; }
  .kc-hero-inner h1 { font-size: 1.7rem; }
  .kc-hero-sub { font-size: 1rem; }
}

/* ================================
   LOGO (JA Purity)
=================================== */
.navbar-brand.logo-image { margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; }
.navbar-brand.logo-image { float: left; }

/* Single, definitive logo size (adjust height to taste) */
.navbar-brand.logo-image img {
  height: 150px !important; width: auto !important;
  max-height: none !important; max-width: none !important;
}
.navbar-brand.logo-image { height: auto !important; width: auto !important; }

/* If you see both .d-dark and .d-light logos on mobile, pick one: */

@media (max-width: 768px){
 .navbar-brand .d-light { display: inline-block !important; }
 .navbar-brand .d-dark { display: none !important; }
}


/* ================================
   IMAGE OVERLAY UTILITY (generic)
=================================== */
.kc-image-wrap { position: relative; display: inline-block; width: 100%; }
.kc-image-wrap img {
  width: 100%; height: auto; display: block;
  border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.kc-image-overlay {
  position: absolute; inset: 0; border-radius: 8px;
  background: rgba(255,255,255,.25);        /* soft white wash by default */
  transition: background .3s ease;
}
.kc-image-wrap:hover .kc-image-overlay { background: rgba(255,102,0,.5); }

/* ================================
   RESPONSIVE TYPE SCALE
=================================== */
h1, .kc-about-hero h1, .kc-tagline h1 {
  font-family: 'Actor','Source Sans 3',sans-serif;
  font-size: 2.25rem; font-weight: 400; line-height: 1.2; margin: 0 0 .5em;
}
h2, .kc-founder-wrap h2 {
  font-family: 'Actor','Source Sans 3',sans-serif;
  font-size: 1.75rem; font-weight: 400; line-height: 1.3; margin: 1.2em 0 .6em;
}
h3 {
  font-family: 'Actor','Source Sans 3',sans-serif;
  font-size: 1.4rem; font-weight: 400; line-height: 1.3; margin: 1em 0 .5em;
}

@media (max-width: 992px){
  h1, .kc-about-hero h1, .kc-tagline h1 { font-size: 1.9rem; }
  h2, .kc-founder-wrap h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  body, p, li, .kc-about-body, .kc-founder-wrap { font-size: 1rem; }
}
@media (max-width: 600px){
  h1, .kc-about-hero h1, .kc-tagline h1 { font-size: 1.6rem; }
  h2, .kc-founder-wrap h2 { font-size: 1.35rem; }
  h3 { font-size: 1.1rem; }
  body, p, li, .kc-about-body, .kc-founder-wrap { font-size: .95rem; }
}

/* ================================
   MISC
=================================== */
/* If you use a founder hero with background img, set a *real* path:
.kc-founder-hero {
  position: relative; min-height: 420px; display: flex; align-items: center;
  background-image: url('/images/your-founder-hero.jpg');  <-- update this
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: #0b0b0b;
}
.kc-founder-overlay { position: absolute; inset: 0; background: rgba(255,255,255,.68); }
.kc-founder-wrap { position: relative; padding: 48px 28px; }
*/

body.dark-active .navbar-brand .d-light { display: none !important; }
body.dark-active .navbar-brand .d-dark  { display: inline-block !important; }

.createdby,
.published,
.hits {display: none !important;}