/* Fixes layered on top of the mirrored WordPress styles. Linked from every page. */

/* Archive pages (category, tag, author, date) wrap the whole page in a 1200px .container,
   so the footer background stopped short of the page edges. Break it out to full width. */
.gigas-body-inner.container {
  overflow: visible;
  display: flow-root;
}
.gigas-body-inner.container > .site-footer,
.gigas-body-inner.container .gigas-page-header {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
body:has(.gigas-body-inner.container) {
  overflow-x: clip;
}

/* WordPress "Additional CSS" gives every h1-h6 word-spacing:-6px, tuned for the large
   Rounded Elegance display headings. It squashes the words in post-card titles (set in
   Nunito) and in the small h6 previous/next post links, so restore normal spacing there. */
article .entry-title,
article .entry-title a,
.pagination-prev,
.pagination-next {
  word-spacing: normal;
}

/* Homepage intro ("Every Study Changes..."): Elementor's desktop settings (100px side padding
   on the heading, 65% max width on the text) were never adjusted for smaller screens, so on a
   phone the heading wrapped in ~130px and the text in ~210px. Use the full column width. */
@media (max-width: 1024px) {
  /* Same selectors as Elementor's rules, so these win by loading later. */
  .elementor-30731 .elementor-element.elementor-element-a57e711 .section-title-wrapper .section-title {
    padding-left: 0;
    padding-right: 0;
  }
  .elementor-30731 .elementor-element.elementor-element-a57e711 .section-description .section-content {
    max-width: 100%;
  }
}

/* Drop the decorative line and sliding dot after section labels:
   "SOLUTION OVERVIEW" (platform page) and "FEATURED CONTENT" (resource center). */
.elementor-element.elementor-element-25fed91 .sub-title::before,
.elementor-element.elementor-element-25fed91 .sub-title::after,
.elementor-element.elementor-element-c3c0465 .sub-title::before,
.elementor-element.elementor-element-c3c0465 .sub-title::after {
  content: none;
}

/* Homepage "Designed for Change / Continuity / Visibility" boxes: on desktop they sit side by
   side and each column has its own margin or padding to make the gutters. Stacked on phones,
   those leftovers made the boxes different widths and left no gap between them. Give all three
   the full column width and a consistent gap. Same selectors as Elementor's rules. */
@media (max-width: 767px) {
  .elementor-30731 .elementor-element.elementor-element-1f749c7 > .elementor-element-populated,
  .elementor-30731 .elementor-element.elementor-element-821d0bf > .elementor-element-populated,
  .elementor-30731 .elementor-element.elementor-element-c7910cd > .elementor-element-populated {
    margin: 0 0 16px;
    --e-column-margin-left: 0px;
    --e-column-margin-right: 0px;
    padding: 0 15px;
  }
  .elementor-30731 .elementor-element.elementor-element-c7910cd > .elementor-element-populated {
    margin-bottom: 0;
  }
}

/* Homepage hero buttons: Elementor fixes them at 40% and 30% of the row, so on phones
   "Talk to an RTSM Expert" wrapped onto 3-4 lines and "Learn More" onto 2. Below 768px
   stack them as full-width buttons with one-line labels. Same selectors as Elementor's. */
@media (max-width: 767px) {
  .elementor-30731 .elementor-element.elementor-element-5a8409e,
  .elementor-30731 .elementor-element.elementor-element-f609902 {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 100%;
  }
  .elementor-30731 .elementor-element.elementor-element-5a8409e > .elementor-widget-container {
    margin: 0 0 12px;
  }
  .elementor-30731 .elementor-element.elementor-element-f609902 > .elementor-widget-container {
    margin: 0;
  }
  .elementor-30731 .elementor-element.elementor-element-5a8409e .cea-button,
  .elementor-30731 .elementor-element.elementor-element-f609902 .cea-button {
    display: block;
    width: 100%;
    text-align: center;
    white-space: nowrap;
  }
}

/* Mobile header bar: it was exactly as tall as the logo (45px), so the logo touched the top
   and bottom edges and looked cramped. Give it breathing room, in both the normal and the
   sticky (scrolled) bar. The bar only shows on mobile, so no media query is needed. */
.header-mobilebar.navbar {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ---- Mobile menu redesign -------------------------------------------------------------
   Full-screen sheet: 69px header bar (logo + round close button), large accordion items in
   the display font, indented sub-menus, and a pinned footer with the main CTA and secondary
   links. Markup additions come from scripts/optimize_site.py; tap-to-open from
   site/assets/mobile-menu.js. Selectors start with "body" to outrank the theme's rules. */
body .mobile-menu-floating {
  --mm-primary: #615B9C;
  --mm-tint: #F4F3F9;
  --mm-line: #E7E5F0;
  --mm-ink: #1F1B33;
  --mm-muted: #6B6880;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
body.mobile-menu-active .mobile-menu-floating {
  overflow: hidden;
}

/* Header bar: same height as the site's mobile header, logo left, close button right. */
body .mobile-menu-floating .header-titles {
  flex: none;
  display: flex;
  align-items: center;
  height: 69px;
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--mm-line);
}
body .mobile-menu-floating .header-titles > a.site-link {
  width: auto;
}
body .mobile-menu-floating .header-titles img {
  height: 40px;
  width: auto;
  max-width: none;
}
body .mobile-menu-floating a.mobile-menu-toggle {
  top: 12px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mm-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23312A4F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 20px no-repeat;
}
body .mobile-menu-floating a.mobile-menu-toggle i {
  display: none;
}

/* Scrolling menu list. */
body .mobile-menu-floating > nav.mobile-menu-wrapper {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 8px 20px;
}
body .mobile-menu-floating ul.mobile-menu > li {
  border-bottom: 1px solid var(--mm-line);
}
body .mobile-menu-floating ul.mobile-menu > li > a {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 48px 0 0;
  font-family: "Rounded Elegance", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  word-spacing: normal;
  color: var(--mm-ink);
}
body .mobile-menu-floating ul.mobile-menu > li:has(> span.up-arrow) > a {
  color: var(--mm-primary);
}

/* Accordion chevron (the theme's arrow toggle, restyled). */
body .mobile-menu-floating ul.mobile-menu li.menu-item-has-children > span {
  top: 14px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23615B9C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform 0.2s, background-color 0.2s;
}
body .mobile-menu-floating ul.mobile-menu li.menu-item-has-children > span::before,
body .mobile-menu-floating ul.mobile-menu li.menu-item-has-children > span::after {
  display: none;
}
body .mobile-menu-floating ul.mobile-menu li.menu-item-has-children > span.up-arrow {
  transform: rotate(180deg);
  background-color: var(--mm-tint);
}

/* Sub-menus. */
body .mobile-menu-floating ul.mobile-menu li.menu-item-has-children ul.sub-menu {
  padding: 0 0 14px;
}
body .mobile-menu-floating ul.mobile-menu ul.sub-menu li > a {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 2px 0;
  padding: 0 14px;
  border-radius: 12px;
  font-family: "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mm-ink);
}
body .mobile-menu-floating ul.mobile-menu ul.sub-menu li > a::after {
  content: "\203A";
  margin-left: auto;
  padding-left: 12px;
  font-size: 20px;
  color: #9D99C2;
}
body .mobile-menu-floating ul.mobile-menu ul.sub-menu li:first-child > a {
  background: var(--mm-tint);
}

/* Pinned footer: main CTA (matches the homepage hero button) and secondary links. */
body .mobile-menu-floating > .korio-mm-foot {
  flex: none;
  margin: 0;
  padding: 16px 20px 22px;
  border-top: 1px solid var(--mm-line);
  background: #fff;
}
body .mobile-menu-floating .korio-mm-cta {
  display: block;
  padding: 17px 20px;
  border-radius: 999px;
  background: var(--mm-primary);
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
}
body .mobile-menu-floating .korio-mm-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 16px;
}
body .mobile-menu-floating .korio-mm-links a {
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--mm-muted);
}

/* ---- Desktop dropdown menus (Platform, Resources) --------------------------------------
   The theme set items at 12-14px in 30px rows with a thin sliding line on hover. Use
   readable 16px semibold Nunito in 44px rows, and a clear hover: the whole row turns
   lavender with purple text and an arrow. The panel gets rounded corners and inner padding
   so highlighted rows sit inside it. "body" outranks the theme's selectors. */
body .header-navbar.navbar ul.nav.wp-menu > li.menu-item-has-children > ul.sub-menu {
  width: auto;
  min-width: 280px;
  padding: 8px;
  border: 1px solid #ECEAF4;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(49, 42, 79, 0.14);
}
body .header-navbar.navbar .wp-menu li > ul.sub-menu li,
body .header-navbar.navbar ul.nav.wp-menu > li.menu-item-has-children > .sub-menu li:first-child,
body .header-navbar.navbar ul.nav.wp-menu > li.menu-item-has-children > .sub-menu li:last-child {
  padding: 0;
  line-height: 22px;
}
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 8px;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  word-spacing: normal;
  white-space: nowrap;
  color: #1F1B33;
  transition: background-color 0.15s, color 0.15s;
}
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a::before {
  display: none;
}
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a::after {
  content: "\2192";
  margin-left: auto;
  color: #615B9C;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.15s, transform 0.15s;
}
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a:hover,
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a:focus-visible {
  background-color: #EFEDF7;
  color: #615B9C;
}
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a:hover::after,
body .header-navbar.navbar .wp-menu li > ul.sub-menu li a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* Headings retagged for a sequential outline (scripts/optimize_site.py, fix_headings) keep
   the look they had at their old level. Values are the old computed styles. */
.elementor-element.elementor-element-eee789e p.korio-was-h5 {
  margin-bottom: 8px;
  font-family: "Rounded Elegance", sans-serif;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 2px;
  word-spacing: -6px;
  color: rgb(17, 30, 33);
}
@media (max-width: 767px) {
  .elementor-element.elementor-element-eee789e p.korio-was-h5 {
    font-size: 20px;
  }
}
.korio-was-h4 {
  letter-spacing: 2px;
}
h2.korio-was-h5.wp-block-heading {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: 2px;
}

/* Post dates used to link to WordPress date archives, which were removed; they're now plain
   text (scripts/optimize_site.py, unlink_archives). Keep the old look, drop the link cues. */
a.korio-date-text,
a.korio-date-text:hover {
  color: inherit;
  cursor: default;
}

/* Header "Talk to an RTSM Expert" button: hover like the homepage hero button (white button,
   purple text) instead of turning near-black. The header bar is white, so a purple outline
   keeps the button's shape visible on hover. The button only has a border on some pages, so
   the outline is an inset shadow (no size change either way). */
body .header-navbar a.btn.btn-primary {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
body .header-navbar a.btn.btn-primary:hover,
body .header-navbar a.btn.btn-primary:focus-visible,
body .sticky-head.header-sticky .header-navbar a.btn.btn-primary:hover,
body .sticky-head.header-sticky .header-navbar a.btn.btn-primary:focus-visible {
  background-color: #fff;
  border-color: #615B9C;
  box-shadow: inset 0 0 0 2px #615B9C;
  color: #615B9C;
}
/* Homepage: the header floats over the purple hero and the theme gives the button a 2px border
   that turns navy on hover. Over the hero, match the hero button exactly (white pill, purple
   text); once the bar turns sticky (white), use the purple outline like every other page. */
body.home .site-header .sticky-head:not(.header-sticky) .header-navbar a.btn.btn-primary:hover,
body.home .site-header .sticky-head:not(.header-sticky) .header-navbar a.btn.btn-primary:focus-visible {
  border-color: #fff;
  box-shadow: none;
}
body.home .site-header .sticky-head.header-sticky .header-navbar a.btn.btn-primary:hover,
body.home .site-header .sticky-head.header-sticky .header-navbar a.btn.btn-primary:focus-visible {
  border-color: #615B9C;
  box-shadow: none; /* the 2px border is the outline here; a shadow would double it */
}

/* Resource center "Load more" button (site/assets/resource-load-more.js). Same pill as the
   site's purple buttons, with the white-and-purple hover used by the header CTA. */
.korio-load-more {
  margin-top: 16px;
  text-align: center;
}
.korio-load-more-button {
  padding: 16px 40px;
  border: 0;
  border-radius: 30px;
  background-color: #615B9C;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.korio-load-more-button:hover,
.korio-load-more-button:focus-visible {
  background-color: #fff;
  color: #615B9C;
  box-shadow: inset 0 0 0 2px #615B9C;
}
.korio-load-more-button:disabled {
  opacity: 0.7;
  cursor: progress;
}
.korio-load-more-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Footer social links (scripts/optimize_site.py, footer_social): plain white LinkedIn and
   YouTube logos from Bootstrap Icons, dimming slightly on hover. */
.social_icon_footer a {
  display: inline-flex;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  transition: opacity 0.2s;
}
.social_icon_footer a:hover,
.social_icon_footer a:focus-visible {
  color: #fff;
  opacity: 0.7;
}

/* Quality & Compliance page: on phones Elementor pulls the "Security, data integrity…" section
   61px up (margin-top: -61px), and the section above has no bottom padding (with overflow
   hidden), so the end of the "Each change is traceable…" paragraph was covered and clipped.
   Use desktop's -3px seam overlap, and give the section above room at the bottom. */
@media (max-width: 1024px) {
  .elementor-36530 .elementor-element.elementor-element-3eff31c6 {
    padding-bottom: 40px;
  }
}
@media (max-width: 767px) {
  .elementor-36530 .elementor-element.elementor-element-44770a42 {
    margin-top: -3px;
  }
}