/* ============================================================================
   SmartPalm public site — brand palette + animated hero (SMARTPALM site-brand 2026-09-26)
   Loaded after assets/css/site.css by application/views/site/layout.php. Changes colours
   only (the SIG measurements, layout, type and components in site.css stay as built) and
   styles the home-hero mesh layer + frosted cards that assets/js/site-hero.js injects.
   Palette (owner-approved): teal-navy #0B2A3A, green #1B8A5A, teal #12B8A6, amber #F5A623,
   page #F7FAF8, cards #EEF6F1; small green text uses #157A4F (AA on white).
   Re-tinted template decorations live in assets/site/img/brand/.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --primary-color: #0B2A3A;
  --secondary-color: #EEF6F1;
  --bg-color: #F7FAF8;
  --accent-color: #1B8A5A;
  --accent-secondary-color: #12B8A6;
  --accent-text: #157A4F;
  --amber: #F5A623;
  --header-bg: rgba(247, 250, 248, .88);
  --nav-pill: #f1f8f4;
  --brand-gradient: linear-gradient(to right, #1B8A5A 0%, #12B8A6 50%, #1B8A5A 100%);
  --brand-gradient-text: linear-gradient(to right, #157A4F 0%, #0E8F80 50%, #157A4F 100%);
  --brand-gradient-diag: linear-gradient(136.83deg, #1B8A5A 2.01%, #12B8A6 97.82%);
  --icon-gradient: linear-gradient(120deg, #1B8A5A, #12B8A6);
}

/* ---------- text colours (small green text = #157A4F for AA) ---------- */
a { color: var(--accent-text); }
a:focus { color: var(--accent-secondary-color); }
.readmore-btn, .post-entry a, .section-footer-text p a, .footer-links p a:hover, .footer-links ul a:hover,
.post-item-content h2 a:hover, .service-item-content h3 a:hover, .page-catagery-list ul li a:hover,
.page-catagery-list ul li a[aria-current], .job-item-main h3 a:hover, .breadcrumb-item a:hover,
.main-menu ul li > a:hover, .main-menu ul li > a:focus, .header-btn .header-login:hover,
.responsive-menu li a:hover, .responsive-menu li a:focus, .insights-tabs ul li:hover:not(.active),
.chip-list.chip-check li a:hover, .contact-info-content p a:hover, .footer-copyright-text p a:hover { color: var(--accent-text); }
.responsive-menu li a:hover, .responsive-menu li a:focus { color: var(--accent-secondary-color); }
.readmore-btn:hover::after { border-color: var(--accent-text); }
/* gradient words on large headings: darker stops so the teal passes 3:1 on white */
.section-title h1 span, .section-title h2 span, .gradient-text, .page-header-box h1 span,
.service-entry h2 span, .project-entry h2 span { background-image: var(--brand-gradient-text); }
.testimonial-slider .swiper .testimonial-content p, .author-content h3, .author-content p { color: #fff; }

/* ---------- buttons ---------- */
.btn-default.btn-highlighted { color: var(--accent-text); border-color: var(--accent-color); }
.btn-default.btn-highlighted::before { background: var(--accent-color); }
.btn-default.btn-highlighted:hover { color: #fff; }
a, button, .btn-default, .accordion-button, .menu-toggle { -webkit-tap-highlight-color: rgba(27, 138, 90, .15); }

/* ---------- amber highlights: sparkles, counter suffixes, active dots ---------- */
.section-title h3::before, .section-title h3::after, .eyebrow::before, .eyebrow::after,
.chip-list.chip-sparkle li, .chip.chip-sparkle, .project-content p { background-image: url("../site/img/brand/icon-sparkle.svg"); }
.chip-list.chip-sparkle-gradient li { background-image: url("../site/img/brand/icon-sparkle-gradient.svg"); }
.about-item-content h2, .facts-item-counter h2, .testimonials-counter-item h2, .solution-counter-item h2 { color: var(--amber); }
.about-item-content h2 .counter { color: var(--primary-color); }
.facts-item-counter h2 .counter, .testimonials-counter-item h2 .counter, .solution-counter-item h2 .counter { color: var(--accent-color); }
.testimonial-slider .testimonial-pagination .swiper-pagination-bullet-active { background: var(--amber); }
.testimonial-slider .testimonial-pagination .swiper-pagination-bullet-active::before { border-color: var(--amber); }
.insights-tabs ul li[aria-current], .insights-tabs ul li.active { background: var(--accent-color); }
.page-pagination ul li.active a, .page-pagination ul li a:hover { background: var(--accent-color); }
.post-meta ul li i { color: var(--accent-color); }

/* ---------- re-tinted decorations ---------- */
.readmore-btn::after, .page-catagery-list ul li a::before { background-image: url("../site/img/brand/arrow-accent.svg"); }
.hero, .page-header, .cta-box-box { background-image: url("../site/img/brand/cta-box-bg.svg"); }
.service-item, .contact-form, .c-form { background-image: url("../site/img/brand/contact-form-bg.png"); }
.contact-info-item { background-image: url("../site/img/brand/contact-info-item-bg.png"); }
.main-footer { background-image: url("../site/img/brand/footer-bg.png"); }
.facts-item { background-image: url("../site/img/brand/facts-item-bg.svg"); }
.post-item, .job-apply-band { background-image: url("../site/img/brand/post-item-bg.svg"); }
.real-impact-image { background-image: url("../site/img/brand/real-impact-image-bg.svg"); }
.testimonials-box { background-image: url("../site/img/brand/testimonials-box-bg.svg"); }
.project-image figure::before, .sidebar-cta-box::before, .page-catagery-list, .project-category, .job-facts { background-image: url("../site/img/brand/sidebar-catagery-list-bg.svg"); }
.team-body { background-image: url("../site/img/brand/team-body-bg.svg"); }
.what-we-box { background-image: url("../site/img/brand/what-we-do-box-bg.svg"); }
.solution-item:nth-child(4n - 3), .solution-item:nth-child(4n - 4) { background-image: url("../site/img/brand/solution-item-bg.svg"); }
.service-impact-list { background-image: url("../site/img/brand/service-impact-list-bg.svg"); }
@media only screen and (max-width: 767px) {
  .solution-item:nth-child(4n - 1) { background-image: url("../site/img/brand/solution-item-bg.svg"); }
  .solution-item:nth-child(4n - 4) { background-image: none; }
}
/* placeholder tiles: mint instead of lavender/peach */
.project-tile, .approach-image .approach-tile, .team-image .team-tile, .page-single-image .single-tile,
.real-impact-image .impact-tile, .page-services .service-item-image .service-tile, .map-placeholder { background: linear-gradient(160deg, #e6f4ee 0%, #f3f8f5 100%); }
.footer-social-media .social-link.whatsapp:hover, .footer-social-media .social-link.youtube:hover { color: #fff; }
.form-note.is-ok { background: #e6f4ee; color: var(--accent-text); border-color: #bfe3d0; }

/* ---------- dark surfaces: teal-navy ---------- */
.responsive-menu .mobile-nav { background: var(--primary-color); }
.icon-box-red, .solution-item .icon-box, .contact-info-item .icon-box, .service-impact-item .icon-box { background: var(--accent-color); }
.solution-item .icon-box::before { background: var(--accent-secondary-color); }

/* ---------- home hero: animated network mesh + frosted cards ---------- */
.sp-page-home .hero { background: radial-gradient(ellipse 70% 60% at 50% 38%, #ffffff 0%, #F7FAF8 45%, #E4F3EB 100%); }
.sp-page-home .hero .hero-mesh { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sp-page-home .hero .hero-mesh canvas { display: block; width: 100%; height: 100%; }
.sp-page-home .hero .container { position: relative; z-index: 2; }
.hero-glass {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px;
  border-radius: 20px; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid #fff; box-shadow: 0 20px 40px rgba(11, 42, 58, .10); color: var(--primary-color); font-size: 16px; font-weight: 700;
  pointer-events: none; will-change: transform; animation: glassBob 7s ease-in-out infinite alternate;
}
.hero-glass i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--icon-gradient); color: #fff; font-size: 18px; flex: 0 0 40px; }
.hero-glass-1 { animation-duration: 7s; }
.hero-glass-2 { animation-duration: 8.5s; animation-delay: -2s; animation-name: glassBobAlt; }
.hero-glass-3 { animation-duration: 9s; animation-delay: -4s; animation-name: glassBobAlt; }
.hero-glass-4 { animation-duration: 7.5s; animation-delay: -1s; }
@keyframes glassBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-14px) rotate(2deg); } }
@keyframes glassBobAlt { from { transform: translateY(-10px) rotate(2deg); } to { transform: translateY(6px) rotate(-2deg); } }
/* desktop >= 1400: four cards in the side margins (content is 840 wide, centred) */
.hero-glass-1 { left: max(20px, calc(50% - 720px)); top: 40%; }
.hero-glass-2 { right: max(20px, calc(50% - 720px)); top: 36%; }
.hero-glass-3 { left: max(20px, calc(50% - 640px)); top: 66%; }
.hero-glass-4 { right: max(20px, calc(50% - 640px)); top: 62%; }
@media only screen and (max-width: 1399px) {
  /* 992-1399: two cards in the empty band between the header (114) and the heading (340) */
  .hero-glass-3, .hero-glass-4 { display: none; }
  .hero-glass-1 { left: calc(50% - 330px); top: 190px; }
  .hero-glass-2 { right: calc(50% - 330px); top: 210px; }
}
@media only screen and (max-width: 991px) {
  /* tablets and phones: two cards under the logo strip; the hero grows by 90px to make room */
  .sp-page-home .hero { padding-bottom: 130px; }
  .hero-glass-1 { left: 20px; top: auto; bottom: 30px; }
  .hero-glass-2 { right: 20px; top: auto; bottom: 36px; }
}
@media only screen and (max-width: 767px) {
  .hero-glass { padding: 10px 14px 10px 10px; font-size: 14px; gap: 10px; }
  .hero-glass i { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }
  .hero-glass-1 { left: 15px; bottom: 28px; }
  .hero-glass-2 { right: 15px; bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glass { animation: none !important; }
}

/* ============================================================================
   CARD BORDERS (2026-09-26, owner request): cards no longer carry the template's
   gradient fills; they are white with a soft green-to-teal gradient border so
   the page carries less colour. Hero, page header, CTA band and footer keep
   their backgrounds. Gradient border = white padding-box over a gradient
   border-box behind a transparent 1px border (works with border-radius).
   ========================================================================= */
:root {
  --card-bg: #FFFFFF;
  --card-border: linear-gradient(135deg, rgba(27,138,90,.55) 0%, rgba(18,184,166,.55) 100%);
  --card-border-hover: linear-gradient(135deg, #1B8A5A 0%, #12B8A6 100%);
  --card-shadow-hover: 0 12px 32px rgba(11,42,58,.10);
}
.post-item, .job-apply-band, .job-facts, .facts-item, .service-item, .contact-form, .c-form,
.contact-info-item, .testimonials-box, .team-body, .what-we-box, .service-impact-list,
.real-impact-image, .page-catagery-list, .project-category, .sidebar-cta-box,
.solution-item:nth-child(n), .about-item, .project-item, .team-item, .value-item,
.faq-accordion .accordion-item, .service-entry-box, .stat-card, .impact-card {
  background-color: var(--card-bg) !important;
  background-image: linear-gradient(var(--card-bg), var(--card-bg)), var(--card-border) !important;
  background-origin: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  background-repeat: no-repeat !important; background-size: auto !important;
  border: 1px solid transparent !important;
  transition: box-shadow .25s ease, transform .25s ease, background-image .25s ease;
}
.post-item:hover, .facts-item:hover, .service-item:hover, .contact-info-item:hover, .team-body:hover,
.what-we-box:hover, .solution-item:nth-child(n):hover, .about-item:hover, .project-item:hover, .team-item:hover, .value-item:hover {
  background-image: linear-gradient(var(--card-bg), var(--card-bg)), var(--card-border-hover) !important;
  box-shadow: var(--card-shadow-hover);
}
/* overlays the template painted on top of cards */
.project-image figure::before, .sidebar-cta-box::before { display: none !important; }
/* keep the inner rule/dividers soft on white */
.post-item .post-item-content + *, .post-item hr { border-color: rgba(11,42,58,.10); }
/* icon tiles inside cards stay tinted so the card still reads as branded */
.service-item .icon-box, .facts-item .icon-box, .contact-info-item .icon-box { background: #EEF6F1; }
@media (prefers-reduced-motion: reduce) { .post-item, .service-item, .facts-item { transition: none; } }

/* ---------- home hero: background video under a light wash (SMARTPALM site-video 2026-10-03) ---------- */
.sp-page-home .hero { position: relative; overflow: hidden; }
.sp-page-home .hero .hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #E4F3EB url("../site/media/hero-accra.jpg") center 40% / cover no-repeat; }
.sp-page-home .hero .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(.85); }
.sp-page-home .hero .hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(247,250,248,.80) 0%, rgba(247,250,248,.62) 45%, rgba(228,243,235,.88) 100%); }
.sp-page-home .hero .hero-mesh { z-index: 1; }
.hero-glass { z-index: 2; }
.sp-page-home .hero .container { z-index: 3; }
@media only screen and (max-width: 767px), (prefers-reduced-motion: reduce) { .sp-page-home .hero .hero-video video { display: none; } }
/* one filled primary action per group; the second stays an outline */
.btn-default.btn-primary-fill { color: #fff; background: var(--brand-gradient); background-size: 200% auto; box-shadow: 0 10px 24px rgba(27, 138, 90, .22); }
.btn-default.btn-primary-fill:hover, .btn-default.btn-primary-fill:focus { color: #fff; background-position: right center; text-decoration: none; }
.hero-btn .btn-default + .btn-default, .cta-box-body .btn-default + .btn-default { margin-left: 12px; }
@media only screen and (max-width: 767px) { .hero-btn .btn-default + .btn-default, .cta-box-body .btn-default + .btn-default { margin-left: 8px; } }

/* ---------- hero round 2 (SMARTPALM site-video 2026-10-03b): no template glass shapes, stronger video, text halo ---------- */
.hero::before, .hero::after, .hero-content::before, .page-header::before, .page-header::after,
.cta-box-box::before, .cta-box-box::after { display: none !important; content: none !important; }
.sp-page-home .hero .hero-video::after { background: linear-gradient(180deg, rgba(247,250,248,.58) 0%, rgba(247,250,248,.42) 45%, rgba(228,243,235,.80) 100%); }
.sp-page-home .hero .hero-video video { filter: saturate(1.05) contrast(1.04); }
.sp-page-home .hero .hero-content { position: relative; }
.sp-page-home .hero .hero-content::after {
  content: ""; display: block; position: absolute; left: -220px; right: -220px; top: -70px; bottom: -40px; width: auto; height: auto;
  animation: none; z-index: -1; pointer-events: none;
  background-image: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.62) 42%, rgba(255,255,255,0) 72%);
}
@media only screen and (max-width: 767px) { .sp-page-home .hero .hero-content::after { left: -40px; right: -40px; } }

/* ---------- hero round 3 (SMARTPALM site-video 2026-10-03c): dark (default) and light treatments, plain fallback ---------- */
.sp-page-home .hero .hero-video { background-size: cover; background-position: center 40%; }
.sp-page-home .hero.hero-dark .hero-video::after { background: linear-gradient(180deg, rgba(11,42,58,.52) 0%, rgba(11,42,58,.62) 50%, rgba(8,36,48,.82) 100%); }
.sp-page-home .hero.hero-dark .hero-video video { filter: saturate(1.05) contrast(1.05); }
.sp-page-home .hero.hero-dark .hero-content::after { display: none; }
.sp-page-home .hero.hero-dark h1 { color: #fff; }
.sp-page-home .hero.hero-dark h1 span { background-image: linear-gradient(to right, #5EE3A6 0%, #2EE6D0 50%, #5EE3A6 100%); }
.sp-page-home .hero.hero-dark .section-title p, .sp-page-home .hero.hero-dark .hero-company-slider p, .sp-page-home .hero.hero-dark .company-name { color: rgba(255,255,255,.85); }
.sp-page-home .hero.hero-dark .company-logo img { filter: brightness(0) invert(1); opacity: .85; }
.sp-page-home .hero.hero-dark .btn-default.btn-highlighted { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); }
.sp-page-home .hero.hero-dark .btn-default.btn-highlighted::before { background: #fff; }
.sp-page-home .hero.hero-dark .btn-default.btn-highlighted:hover { color: var(--primary-color); }
.sp-page-home .hero.hero-dark .hero-glass { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; box-shadow: 0 20px 40px rgba(4,16,38,.35); }
.sp-page-home .hero.hero-plain .hero-content::after { display: none; }
/* about: the bundled team clip plays as a silent loop */
.about-us-video video.about-ambient { pointer-events: none; }

/* ---------- inner page headers: photo + dark wash (SMARTPALM site-video 2026-10-03d) ---------- */
.page-header.page-header-dark { overflow: hidden; background: var(--primary-color); }
.page-header .page-header-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 40%; filter: saturate(1.05); }
.page-header .page-header-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,42,58,.50) 0%, rgba(11,42,58,.62) 55%, rgba(8,36,48,.84) 100%); }
.page-header.page-header-dark .page-header-box { z-index: 1; }
.page-header.page-header-dark h1 { color: #fff; }
.page-header.page-header-dark .page-header-box h1 span { background-image: linear-gradient(to right, #5EE3A6 0%, #2EE6D0 50%, #5EE3A6 100%); }
.page-header.page-header-dark .breadcrumb-item, .page-header.page-header-dark .breadcrumb-item a, .page-header.page-header-dark .post-single-meta ol li { color: rgba(255,255,255,.85); }
.page-header.page-header-dark .breadcrumb-item a:hover { color: #fff; }
.page-header.page-header-dark .breadcrumb-item.active { color: #fff; }
.page-header.page-header-dark .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }
.page-header.page-header-dark .post-single-meta ol li i { color: #5EE3A6; }
@media only screen and (max-width: 767px) { .page-header .page-header-media { background-position: center; } }

/* ---------- header dropdowns: white card instead of the green gradient (SMARTPALM site-video 2026-10-03e) ---------- */
.main-menu ul ul {
  background: #fff; background-image: none; border: 1px solid #E3ECE7; border-radius: 14px; box-shadow: 0 14px 34px rgba(11,42,58,.14);
  width: auto; min-width: 220px; margin-top: 8px; padding: 8px;
}
.main-menu ul li:hover > ul, .main-menu ul li:focus-within > ul { padding: 8px; }
.main-menu ul ul::before { content: ""; position: absolute; left: 28px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #E3ECE7; border-top: 1px solid #E3ECE7; transform: rotate(45deg); }
/* invisible bridge so the menu stays open while the pointer crosses the gap under the tab */
.main-menu ul li.submenu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.main-menu ul ul li + li { margin-top: 2px; }
.main-menu ul ul li a { display: block; padding: 10px 14px; border-radius: 9px; color: var(--primary-color); font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.main-menu ul ul li a:hover, .main-menu ul ul li a:focus { background: #EEF6F1; color: var(--accent-text); padding: 10px 14px; }

/* SMARTPALM 2026-10-03f: client strip from the Customers list - name chips while no logo is uploaded */
.hero-company-slider .swiper-slide { height: auto; display: flex; align-items: center; }
.company-logo { height: auto; min-height: 44px; }
.hero-company-slider .company-logo { width: 100%; }
.company-logo .company-name { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(26, 60, 52, .18); background: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; line-height: 1.25; opacity: 1; color: var(--primary-color); overflow-wrap: anywhere; }
.sp-page-home .hero.hero-dark .company-logo .company-name { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.10); color: #fff; }
.sp-page-home .hero.hero-dark .company-logo .company-name:hover { background: rgba(255,255,255,.18); }
.testimonial-item .author-content p { opacity: .9; }
/* up to five clients: a centred row of auto-width chips/logos instead of fixed-width slides (Swiper stays idle: no loop/autoplay) */
.hero-company-slider.is-static .swiper-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; transform: none !important; }
.hero-company-slider.is-static .swiper-slide { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.hero-company-slider.is-static .company-logo { width: auto; }
.hero-company-slider.is-static .company-logo .company-name { width: auto; white-space: nowrap; }
.hero-company-slider.is-static .company-logo img { width: auto; max-width: 160px; }

/* SMARTPALM 2026-10-03g: seven service cards - the odd one on the last row sits centred */
.page-services .row { justify-content: center; }