/* Karamad — Joomla / Helix Ultimate
   Complete stylesheet: replace the previous supplied style with this file.
   Uses the blog's existing locally hosted Peyda font. */
@font-face {
  font-family: 'Peyda';
  src: url('/templates/shaper_helixultimate/fonts/peyda.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --km-navy: #003366;
  --km-deep: #0a2a4e;
  --km-gold: #d4af37;
  --km-bg: #f0f2f9;
  --km-text: #34445a;
  --km-border: #e3e8ef;
}
body.site.helix-ultimate {
  font-family: 'Peyda', Tahoma, sans-serif !important;
  color: var(--km-text);
  background: var(--km-bg);
  line-height: 1.9;
  font-feature-settings: 'ss01';
  --sppb-link-color: #003366;
  --sppb-link-hover-color: #0a2a4e;
  --sppb-menu-text-hover-color: #003366;
  --sppb-menu-text-active-color: #003366;
}
body.site .body-innerwrapper { background: var(--km-bg); }
body.site :is(h1,h2,h3,h4,h5,h6) {
  font-family: 'Peyda', Tahoma, sans-serif;
  color: var(--km-navy);
  line-height: 1.65;
}
body.site :is(input,select,textarea,button,.btn) { font-family: inherit; }
body.site a { transition: color .2s, background-color .2s, border-color .2s; }
body.site a:focus-visible, body.site button:focus-visible {
  outline: 3px solid var(--km-gold);
  outline-offset: 4px;
}
/* Header: preserve Helix positioning and menu behavior. */
body.site #sp-header {
  background: #fff;
  border-bottom: 1px solid var(--km-border);
  box-shadow: 0 4px 22px rgb(0 51 102 / 5%);
}
body.site #sp-header .logo img { max-width: 100%; object-fit: contain; }
body.site :is(.sp-megamenu-parent,.menu.nav-pills) > li > :is(a,span),
body.site .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  font-family: 'Peyda', Tahoma, sans-serif !important;
}
body.site .sp-megamenu-parent > li > a { color: var(--km-navy); font-weight: 700; }
body.site .sp-megamenu-parent > li.active > a,
body.site .sp-megamenu-parent > li > a:hover { color: #8a6b12; }
body.site .sp-dropdown-inner {
  border: 1px solid var(--km-border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgb(0 51 102 / 12%);
}
body.site :is(#modal-menu,.offcanvas-menu) { background: #fff; color: var(--km-navy); }
body.site .offcanvas-menu .menu > li > a { font-family: inherit; color: var(--km-navy); }
body.site .offcanvas-menu .menu > li.active > a { color: #8a6b12; }
body.site .burger-icon > span { background-color: var(--km-navy); }
body.site .mod-finder .form-control {
  min-height: 44px;
  border: 1px solid var(--km-border);
  border-radius: 12px;
  background: #f7f8fb;
  color: var(--km-navy);
  padding: 9px 16px;
}
body.site .mod-finder .form-control:focus {
  background: #fff;
  border-color: var(--km-gold);
  box-shadow: 0 0 0 3px rgb(212 175 55 / 16%);
}
/* Category and article cards */
body.site #sp-main-body { padding-top: 44px; padding-bottom: 64px; }
body.site .blog > h1, body.site .blog > h2 {
  font-size: clamp(25px,3vw,36px);
  font-weight: 800;
  margin-bottom: 28px;
  padding-inline-start: 18px;
  border-inline-start: 4px solid var(--km-gold);
}
body.site .article-list .article {
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 26px rgb(0 51 102 / 5%);
  transition: box-shadow .25s, border-color .25s;
}
@media (hover: hover) {
  body.site .article-list .article:hover {
    border-color: #d4af3780;
    box-shadow: 0 16px 40px rgb(0 51 102 / 11%);
  }
}
body.site .article-list .article .article-intro-image {
  float: none !important;
  margin: 0 !important;
  width: 100%;
  border-radius: 0;
}
body.site .article-list .article .article-intro-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
body.site .article-list .article .article-body { padding: 24px; }
body.site .article-list .article .article-header h2 {
  font-size: clamp(19px,1.6vw,24px);
  font-weight: 800;
  line-height: 1.8;
  margin-bottom: 14px;
}
body.site .article-header h2 a { color: var(--km-navy); }
body.site .article-header h2 a:hover { color: #8a6b12; }
body.site .article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: #66758a;
  font-size: 12px;
  line-height: 1.9;
  margin-bottom: 18px;
}
body.site .article-info > span { margin: 0; }
body.site .article-info a { color: var(--km-navy); }
body.site .article-introtext { color: var(--km-text); font-size: 15px; line-height: 2.1; }
body.site .article-introtext p,
body.site .article-details .article-fulltext p { text-align: justify; }
/* Native readmore and the installed JO Read More plugin */
body.site .readmore-container { text-align: start; margin-top: 20px; }
body.site .readmore-container a,
body.site .article-list .readmore a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--km-gold);
  border-radius: 12px;
  background: linear-gradient(110deg,#e6c55c,#d4af37);
  color: var(--km-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  box-shadow: 0 5px 16px rgb(212 175 55 / 18%);
}
body.site .readmore-container a:hover,
body.site .article-list .readmore a:hover {
  background: var(--km-navy);
  color: #fff;
  border-color: var(--km-navy);
}
/* Full article */
body.site .article-details {
  padding: clamp(20px,4vw,48px);
  border: 1px solid var(--km-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 30px rgb(0 51 102 / 5%);
}
body.site .article-details .article-header h1 { font-size: clamp(25px,3vw,38px); font-weight: 800; }
body.site .article-details .article-fulltext { font-size: 17px; line-height: 2.2; overflow-wrap: break-word; }
body.site .article-details .article-fulltext img { max-width: 100%; height: auto; border-radius: 16px; }
body.site .article-details .article-fulltext :is(h2,h3) { margin-top: 32px; margin-bottom: 16px; }
body.site .article-details .article-fulltext a { color: var(--km-navy); text-decoration: underline; text-underline-offset: 4px; }
body.site .article-details blockquote {
  background: #f7f5eb;
  border: 0;
  border-inline-start: 4px solid var(--km-gold);
  border-radius: 12px;
  padding: 20px 24px;
  color: var(--km-deep);
}
/* Pagination spacing; Helix keeps the original counter placement. */
body.site .blog .com-content-category-blog__navigation {
  margin-top: 24px;
}
body.site .blog .com-content-category-blog__pagination .pagination {
  padding-inline: 0;
  gap: 6px;
}
body.site .related-article-list {
  --km-related-padding: 20px;
}

body.site .related-article-list .article > .article-header {
  margin: 0 !important;
  padding: var(--km-related-padding) var(--km-related-padding) 12px !important;
}

body.site .related-article-list .article-header :is(h2, h4) {
  margin: 0 !important;
}

body.site .related-article-list .article > .article-info {
  margin: 0 !important;
  padding: 0 var(--km-related-padding) var(--km-related-padding) !important;
}

@media (max-width: 767px) {
  body.site .related-article-list {
    --km-related-padding: 18px;
  }
}
@media (max-width: 767px) {
  body.site .article-details [itemprop="articleBody"] > div:has(> a[style][href*="/health-insurance/"]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.site .article-details [itemprop="articleBody"] > div:has(> a[style][href*="/health-insurance/"]) > a[style][href*="/health-insurance/"] {
    align-self: center !important;
    max-width: 100% !important;
  }
}

/* Karamad menu skin for Joomla / Helix Ultimate.
   Append after the existing CSS. Helix owns opening, closing and positioning. */

body.site :is(#modal-menu, .offcanvas-menu) {
  font-family: 'Peyda', Tahoma, sans-serif;
  color: var(--km-navy, #003366);
  background-color: #fff;
}
body.site #modal-menu {
  background-color: var(--km-bg, #f0f2f9);
}
body.site #modal-menu .modal-menu-inner {
  box-sizing: border-box;
  max-height: 100%;
  overflow-y: auto;
  padding-block: 24px;
}
body.site #modal-menu .modal-menu-inner > .container {
  box-sizing: border-box;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--km-border, #e3e8ef);
  border-radius: 22px;
  box-shadow: 0 12px 36px rgb(0 51 102 / 7%);
}
body.site #modal-menu .modal-menu-inner > .container > .row {
  width: 100%;
  margin: 0;
  align-items: center;
}
body.site #modal-menu .sp-megamenu-parent,
body.site .offcanvas-menu .offcanvas-inner .menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.site #modal-menu .sp-megamenu-parent > li,
body.site .offcanvas-menu .offcanvas-inner .menu > li {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}
body.site #modal-menu .sp-megamenu-parent > li:last-child,
body.site .offcanvas-menu .offcanvas-inner .menu > li:last-child {
  margin-bottom: 0;
}
body.site #modal-menu .sp-megamenu-parent > li > a,
body.site .offcanvas-menu .offcanvas-inner .menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--km-navy, #003366);
  font-family: inherit !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  text-align: start;
  text-decoration: none;
  white-space: normal;
  transition: background-color .2s, border-color .2s, color .2s;
}
body.site #modal-menu .sp-megamenu-parent > li > a > :is(.fas, .far, .fab),
body.site .offcanvas-menu .offcanvas-inner .menu > li > a > :is(.fas, .far, .fab) {
  flex: 0 0 20px;
  width: 20px;
  padding: 0 !important;
  font-size: 17px;
  text-align: center;
}
@media (hover: hover) {
  body.site #modal-menu .sp-megamenu-parent > li > a:hover,
  body.site .offcanvas-menu .offcanvas-inner .menu > li > a:hover {
    background-color: #f5f7fb;
    border-color: var(--km-border, #e3e8ef);
    color: var(--km-navy, #003366);
  }
}
body.site #modal-menu .sp-megamenu-parent > li:is(.active, .current-item) > a,
body.site .offcanvas-menu .offcanvas-inner .menu > li:is(.active, .current) > a,
body.site :is(#modal-menu, .offcanvas-menu) a[aria-current="page"] {
  background-color: #fbf7e9;
  border-color: #e6d38b;
  color: var(--km-navy, #003366);
}
body.site :is(#modal-menu, .offcanvas-menu) a:focus-visible {
  outline: 2px solid var(--km-gold, #d4af37);
  outline-offset: 3px;
}

/* Contact and search panel inside the desktop menu. */
body.site #modal-menu .modules-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--km-border, #e3e8ef);
  border-radius: 16px;
  background-color: #f7f8fb;
}
body.site #modal-menu .modules-wrapper > .sp-module,
body.site #modal-menu :is(.mod-finder, .awesomplete) {
  width: 100%;
}
body.site #modal-menu .mod-finder .form-control {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--km-border, #e3e8ef);
  border-radius: 12px;
  background: #fff;
  color: var(--km-navy, #003366);
  font-family: inherit;
  font-size: 14px;
}
body.site #modal-menu .sp-contact-info {
  gap: 10px;
  margin: 16px 0;
  padding: 0;
}
body.site #modal-menu .sp-contact-info > li {
  margin: 0;
  padding: 0;
  color: #66758a;
  font-size: 14px;
  line-height: 1.8;
}
body.site #modal-menu .sp-contact-info a {
  color: var(--km-navy, #003366);
  text-decoration: none;
}
body.site #modal-menu .social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.site #modal-menu .social-icons > li { margin: 0; }
body.site #modal-menu .social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--km-border, #e3e8ef);
  border-radius: 10px;
  background: #fff;
  color: var(--km-navy, #003366);
  font-size: 16px;
}

/* Menu controls and the existing mobile drawer. */
body.site :is(#modal-menu-toggler, #offcanvas-toggler, .close-offcanvas) {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 1px solid var(--km-border, #e3e8ef);
  border-radius: 12px;
  background: #fff;
  color: var(--km-navy, #003366);
}
body.site .offcanvas-menu {
  border-inline-end: 1px solid var(--km-border, #e3e8ef);
}
body.site .offcanvas-menu .offcanvas-inner { padding: 20px; }
body.site .offcanvas-menu .offcanvas-inner .menu > li > a { font-size: 16px; }
@media (max-width: 767px) {
  body.site #modal-menu .modal-menu-inner > .container {
    padding: 18px;
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.site #modal-menu .sp-megamenu-parent > li > a,
  body.site .offcanvas-menu .offcanvas-inner .menu > li > a {
    transition: none;
  }
}