/*!
 Theme Name: Rubrum
 Theme URI:
 Author: Dev Team
 Author URI:
 Description: Rubrum is a blank canvas for your ideas and it makes the block editor your best brush.
 Requires at least: 6.6
 Tested up to: 7.0
 Requires PHP: 8.0
 Version: 7.0
 Text Domain: rubrum
*/


/** Add your custom styles here **/
/* GLOBAL */
.deco-divider,
.hero-deco-divider {
    margin-left: 0 !important;
}

.hero-and-footer-deco-line {
  height: 10px;
}

.wp-block-button__link {
    transition: var(--wp--custom--bootstrap--button--primary--styles--transition, var(--wp--custom--utility--transition--default));
}

.gform_wrapper form label {
  color: white !important;
}

.gform_wrapper form label .gfield_required {
  display: none;
}

.gform_wrapper .gform_fields.top_label {
  grid-column-gap: 10px !important;
}

.gform_wrapper button.gform_button {
  background: var(--wp--preset--color--primary-mid) !important;
}

.gform_wrapper form .gform-footer.gform_footer {
  margin-top: var(--wp--preset--spacing--50) !important;
}

.gform_wrapper .gform_fileupload_rules {
  color: white;
}

.gform_wrapper.gform-theme--orbital form input[type="file"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  line-height: 36px !important;
}

.gform_wrapper.gform-theme--orbital form input[type="file"]::file-selector-button {
  height: 36px;
  line-height: 36px;
  vertical-align: middle;
}

.gform_wrapper .text-disclaimer-opt-in a {
  text-decoration: underline;
}

.gform_wrapper .text-disclaimer-opt-in a:hover {
  text-decoration: underline;
  color: white !important;
}

.force-primary-btn-hover-styles a:hover {
    color: var(--wp--custom--bootstrap--button--primary--state--hover--color--text) !important;
    background: var(--wp--custom--bootstrap--button--primary--state--hover--color--background) !important;
    border-color: var(--wp--custom--bootstrap--button--primary--state--hover--border--color, var(--wp--custom--bootstrap--button--primary--border--color)) !important;
    transform: var(--wp--custom--bootstrap--button--primary--state--hover--styles--transform, scale(1.03)) !important;
    box-shadow: var(--wp--custom--bootstrap--button--primary--state--hover--styles--box-shadow) !important;
    text-shadow: var(--wp--custom--bootstrap--button--primary--state--hover--styles--text-shadow) !important;
}

/* HEADER */
header {
    max-width: 90% !important;
    position: fixed;
    top: var(--wp--preset--spacing--50);
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 1000;
}

.archive header > div {
  padding-inline: var(--wp--style--root--padding-right) !important;
}

header > div {
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 10px;
}

header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--secondary) !important;
}

/* HOME Page */
#hero .wp-block-cover__embed-background {
  container-type: size;
  overflow: hidden;
}

#hero .wp-block-cover__embed-background iframe {
  width: max(100cqw, 100cqh * 16 / 9);
  height: max(100cqh, 100cqw * 9 / 16);
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
}

#hero .wp-block-cover__inner-container,
.single-resource .banner-title-ctn > .wp-block-group {
  max-width: 90%;
}

#hero #hero-text-ctn {
    margin-top: 4%;
}

#hero #hero-text-ctn * {
    max-width: 715px;
    margin-left: 0 !important;
}

#hero h1 {
    font-weight: 900;
    line-height: 90.635%;
}

#hero h1 span {
    line-height: 109.375%;
    margin-bottom: 20px;
}


  /* Types of arthritis by the numbers */
.stat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 32px;
}
.stat-grid > .stat {
  box-sizing: border-box;
  flex: 0 0 20%;
  position: relative;
  padding: 0 30px;
  text-align: center;
}

  /* Dividers */
.stat-grid > .stat::before {
  content: "";
  position: absolute;
  height: 65%;
  top: 50%; 
  transform: translateY(-50%); 
  left: 0;
  width: 1px;
  background: var(--wp--preset--color--primary-light);
}
.stat-grid > .stat:first-child::before { display: none; }

.stat p {
    padding: 0 3px;
}

.stat p strong {
    font-weight: 800;
}

  /* Badge */
.stat-badge {
  width: 123px;
  height: 123px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.25));
}
.stat-shape {
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  -webkit-mask: url(../../uploads/2026/09/polygon-1.svg) center / contain no-repeat;
          mask: url(../../uploads/2026/09/polygon-1.svg) center / contain no-repeat;
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%,
                70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  padding: 0 !important;
}

/* Tablet: 3 per row, centered */
@media (max-width: 1024px) {
  .stat-grid > .stat { flex-basis: calc(100% / 3); }
  .stat-grid > .stat:first-child::before { display: block; }
  .stat-grid > .stat:nth-child(3n+1)::before { display: none; }
}

/* Mobile: stacked, horizontal dividers */
@media (max-width: 600px) {
  .stat-grid { row-gap: 0; }
  .stat-grid > .stat { flex-basis: 100%; padding: 24px 0; }
  .stat-grid > .stat:nth-child(3n+1)::before { display: block; }
  .stat-grid > .stat::before {
    top: 0; bottom: auto; left: 50%;
    transform: translateX(-50%);
    width: 65%; height: 1px;
  }
  .stat-grid > .stat:first-child::before { display: none; }
  .stat-badge { width: 123px; height: 123px }
}

  /* Remission is more than a number */
#logo-carousel .swiper-wrapper {
  transition-timing-function: linear !important;
  align-items: center;
}

#logo-carousel .logo-ctn {
  /* background: #F3F9FF; */
  padding: 10px;
}

#logo-carousel figure {
  /* width: 295px; */
  width: auto;
  /* height: 140px; */
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo-carousel figure a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; 
  width: 100%;
}

#logo-carousel figure img {
  /* height: 140px; */
  width: auto;
}

  /* What remission means to our partners */

    /* so deco quotes don't get cutoff by overflow: hidden */

#quotes-carousel {
  margin-block: var(--wp--preset--spacing--60);
}

#quotes-carousel .swiper-wrapper {
  align-items: center;
}

#quotes-carousel .swiper {
  padding: 8px 24px;
  margin: -8px -24px;
}

#quotes-carousel .wp-block-group {
  position: relative;
  border-radius: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 20px clamp(34px, 27.88px + 1.633vw, 54px);
}

#quotes-carousel .wp-block-group::before,
#quotes-carousel .wp-block-group::after {
content: "";
position: absolute;
width: 48px;
height: 34px;
background-color: currentColor;
-webkit-mask: url(../../uploads/2026/09/deco-quotes.svg) no-repeat center / contain;
        mask: url(../../uploads/2026/09/deco-quotes.svg) no-repeat center / contain;
pointer-events: none;
}

#quotes-carousel .wp-block-group::before { top: 10%;     left: -3.5%;}
#quotes-carousel .wp-block-group::after  { bottom: 50%; right: -3.5%; transform: rotate(180deg) translateY(-50%);}

@media (min-width: 768px) {
  #quotes-carousel .swiper-slide {
    opacity: .4;
    /* transition: opacity 0.3s ease-in-out; */
  }

  #quotes-carousel .swiper-slide-next {
    opacity: 1;
  }
}

/* GET INVOLVED Page  */
#map-section {
    position: relative;
}

/* hidden until a country/marker is clicked (all sizes) */
#country-info-ctn {
    display: none;
    flex-direction: column;
}

/* back btn shows at all sizes. May be the page's own markup or the <button> the map custom JS injects, so reset button defaults */
#close-map-info-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* !important so the map library's cursor handling can't reset it on mousemove */
#close-map-info-back-btn,
#close-map-info-back-btn * {
    cursor: pointer !important;
}

    /* Map */
#map_wrapper_386 {
  max-width: none;
}

#country-info-ctn {
  z-index: 999999; /* Your high z-index */
  box-shadow: -4px -4px 20px -4px rgba(0, 30, 99, 0.25);
  
  /* Cuts off the bottom shadow perfectly while leaving room for top/sides */
  clip-path: inset(-30px -30px 0px -30px);
}

/* desktop: info panel overlays the map. Keep in sync with desktopMQ in main.js */
@media (min-width: 768px) {
  #country-info-ctn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 38% !important;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
  }

  #country-info-ctn.dock-left {
    left: 0;
    right: auto;
  }

  .map-country-info-ctn {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  #country-info-injected {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* mobile: info panel sits below the map in mobile flow */
@media (max-width: 767.98px) {
  #country-info-ctn {
    width: 100% !important;
    padding: var(--wp--preset--spacing--50) 20px;
  }

  /* no fixed panel height on mobile, so let stories flow instead of scrolling */
  #country-info-ctn .wad-story-scroll {
    overflow-y: visible;
    padding-right: 0;
  }
}

.map-country-info-ctn h2.country-name {
    color: var(--wp--preset--color--secondary);
    font-weight: 800;
    margin-bottom: 15px;
}

.wad-story-scroll {
  overflow-y: auto;
  padding-right: 30px;
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--primary-light) white;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
}
.wad-story-scroll::-webkit-scrollbar {
  width: 6px;
}
.wad-story-scroll::-webkit-scrollbar-track {
  background: white;
}
.wad-story-scroll::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--primary-light) white;
  border-radius: 3px;
}

.wad-story-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50, clamp(20px, 2.5vw, 40px));
  padding-bottom: 10px;
}

.wad-story-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 10px);
}

.wad-story-title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading, "Inter", sans-serif);
  font-size: var(--wp--preset--font-size--medium, 1.25rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--wp--preset--color--contrast, #001E63);
}

.wad-story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--wp--preset--font-family--default, "Inter", sans-serif);
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.286;
  color: var(--wp--preset--color--contrast, #001E63);
}

.wad-story-divider {
  display: inline-block;
  width: 2px;
  height: 12px;
  background: var(--wp--preset--color--accent-teal);
}

.wad-story-body {
  font-family: var(--wp--preset--font-family--default, "Inter", sans-serif);
  font-size: var(--wp--preset--font-size--normal, 1rem);
  line-height: 1.4375;
  color: var(--wp--preset--color--contrast, #001E63);
}
.wad-story-body p {
  margin: 0;
}
.wad-story-body p:last-child {
  margin-bottom: 0;
}
.wad-story-body ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}
.wad-story-body li {
  margin: 0;
}

.wad-story-cta-text {
  margin: 0;
  font-family: var(--wp--preset--font-family--default, "Inter", sans-serif);
  font-size: var(--wp--preset--font-size--normal, 1rem);
  font-weight: 800;
  line-height: 1.4375;
  color: var(--wp--preset--color--contrast, #001E63);
}

/* Mimic primary bootstrap button from theme.json */
.wad-learn-more-wrap {
    margin-top: 10px;
}

.wad-learn-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--wp--custom--bootstrap--button--secondary--color--text, var(--wp--preset--color--primary, #002F7F));
  border-style: solid;
  border-width: var(--wp--custom--bootstrap--button--secondary--border--width, 1px);
  border-color: var(--wp--custom--bootstrap--button--secondary--border--color, var(--wp--preset--color--primary, #002F7F));
  border-radius: var(--wp--custom--bootstrap--button--secondary--border--radius, 6px);
  padding:
    var(--wp--custom--bootstrap--button--secondary--spacing--padding--top, 12px)
    var(--wp--custom--bootstrap--button--secondary--spacing--padding--right, clamp(20px, 3.75vw, 60px))
    var(--wp--custom--bootstrap--button--secondary--spacing--padding--bottom, 12px)
    var(--wp--custom--bootstrap--button--secondary--spacing--padding--left, clamp(20px, 3.75vw, 60px));
  font-family: var(--wp--preset--font-family--default, "Inter", sans-serif);
  font-size: var(--wp--custom--bootstrap--button--secondary--typography--font-size, 15px);
  font-weight: var(--wp--custom--bootstrap--button--secondary--typography--font-weight, 600);
  letter-spacing: var(--wp--custom--bootstrap--button--secondary--typography--letter-spacing, 2.4px);
  line-height: var(--wp--custom--bootstrap--button--secondary--typography--line-height, 1);
  text-transform: var(--wp--custom--bootstrap--button--secondary--typography--text-transform, uppercase);
  transition: var(--wp--custom--utility--transition--default, all .2s ease-in-out);
}
.wad-learn-more-btn:hover,
.wad-learn-more-btn:focus-visible {
  color: white !important;
  background: var(--wp--custom--bootstrap--button--secondary--state--hover--color--background);
  border-color: var(--wp--custom--bootstrap--button--secondary--state--hover--border--color);
  box-shadow: var(--wp--preset--shadow--small, 0px 4px 2px rgba(0, 0, 0, 0.25));
}
    
/* ABOUT PAGE */
.key-messages-row > .wp-block-group {
  flex-basis: 33%;
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
}

.key-messages-row > .wp-block-group > div:last-of-type {
  flex-grow: 1;
}

.gform_wrapper .world-arthritis-day-plans {
  margin-bottom: -16px !important;
  font-weight: 800;
}

/** RESOURCES PAGE  **/
/* fingagling...  */
#resources-grid .wp-block-cover {
  height: 520px;
}

#resources-grid .wp-block-cover .wp-block-cover__inner-container {
  height: 60%;
}

#resources-grid .wp-block-cover .wp-block-cover__inner-container > .wp-block-group {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#resources-grid h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3lh;
}
/* ..finagling */
.card-resource a.wp-block-read-more:hover {
    color: var(--wp--preset--color--accent) !important;
    text-decoration: none;
}
.card-resource h3 a:hover {
    color: var(--wp--preset--color--accent) !important;
    text-decoration: none;
}
.card-resource .truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-resources-btns .wp-block-buttons > div {
  flex: auto 0 0;
}

.page-resources .group-resources-btns .btn-all .wp-block-button__link:not(:hover),
.term-advocacy-resources .group-resources-btns .btn-advocacy .wp-block-button__link:not(:hover),
.term-papers .group-resources-btns .btn-papers .wp-block-button__link:not(:hover),
.term-social-graphics .group-resources-btns .btn-social .wp-block-button__link:not(:hover),
.term-videos .group-resources-btns .btn-videos .wp-block-button__link:not(:hover) {
    background-color: var(--wp--preset--color--tertiary) !important;
    border-color: var(--wp--preset--color--tertiary) !important;
    color: #000 !important;
}

.taxonomy-resource-category a {
    display: inline-block;
    transition: var(--wp--custom--bootstrap--button--secondary--styles--transition, var(--wp--custom--utility--transition--default));
    color: var(--wp--preset--color--base);
    background: var(--wp--preset--color--primary-mid);
    font-size: 15px;
    font-weight: 800;
    text-transform: var(--wp--custom--bootstrap--button--primary--typography--text-transform);
    line-height: 1.53;
    letter-spacing: 2.4px;
    margin: 0 0;
    padding-top: var(--wp--custom--bootstrap--button--primary--spacing--padding--top, 0px);
    padding-bottom: var(--wp--custom--bootstrap--button--primary--spacing--padding--bottom, 0px);
    padding-left: var(--wp--preset--spacing--40) !important;
    padding-right: var(--wp--preset--spacing--40) !important;;
    border-radius: var(--wp--custom--bootstrap--button--primary--border--radius);
    border-style: var(--wp--custom--bootstrap--button--primary--border--style);
    border-color: var(--wp--custom--bootstrap--button--primary--border--color);
    border-width: 1px;
}
.taxonomy-resource-category a:active,
.taxonomy-resource-category a:hover,
.taxonomy-resource-category a:focus {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary-mid);
    color: var(--wp--preset--color--primary-mid) !important;
    text-decoration: none;
}

/* SINGLE POST (resource) */
.single-resource .banner-title-ctn .hero-deco-divider {
  margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
}

/* Responsiveness */
@media (max-width: 500px) {
  #hero {
    min-height: 500px !important;
  }
}

@media (max-width: 781.98px) {
  .key-messages-row > .wp-block-group {
    flex-basis: 100%;
  }

  #resources-grid .wp-block-cover {
    height: 400px;
  } 

}

@media (max-width: 991.98px) {
    .alt-cols-text {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .deco-divider {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .alt-cols-text .wp-block-buttons {
        justify-content: center;
    }
}

@media (min-width: 992px) {
  .deco-divider.is-wide-left {
    margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  }

  #pursuing-remission .alt-cols-text {
    padding-left: max(
      calc((100% - var(--wp--style--global--wide-size)) / 2),
      calc(5% + 14.4px)
    ) !important;
  }
}

@media (min-width: 1400px) {
  #pursuing-remission .img-col {
    flex-basis: 42% !important;
  }
}