/*
Theme Name: Blockbase Optimind
Theme URI: https://myoptimind.ca
Author: Ben Johnstone
Author URI: https://myoptimind.ca
Description: A child theme of Blockbase for Optimind.
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: blockbase
Text Domain: blockbase-optimind
Tags: full-site-editing, block-patterns, wide-blocks
*/

/* overflow-anchor:none: the shrinking sticky header (below) reflows the page,
   and Chrome's scroll anchoring "compensates" by pulling scrollY back by the
   height lost — up to the full 117px at 1024-1540px, i.e. right back to 0,
   which un-shrinks the header and fights the user's scroll. Measured with a
   headless scroll test: scrolling to 40 snapped back to 0 with anchoring on,
   held steady at 40 with it off. */
html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px;
   overflow-anchor: none;
}
/* Core's .is-style-outline CSS only sets `border: 2px solid` (width + style), never a
   color, so border-color defaults to currentcolor and just tracks whatever the button's
   text color is. Blockbase's ponyfill.css hover rule only overrides text/background color,
   not border-color, so on hover the border would otherwise silently follow the new (white)
   hover text color instead of staying slate. This particular button also carries an explicit
   borderColor:"background" block attribute (for its default white-on-photo look), which WP
   renders as .has-background-border-color — a core utility class with !important — so the
   hover override needs !important too, not just higher specificity, to win. */
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover {
	border-color: var(--wp--custom--color--primary) !important;
}

.wp-block-button.is-style-link,
.wp-block-button.is-style-external-link  {
   &> a.wp-block-button__link {
      text-decoration: none !important;
      font-weight: 600 !important;
   }
}

/* Core's block "Position: Sticky" support (the editor's Position panel) applies
   position:sticky to the header PATTERN block (.gapless-group / .site-header), which is
   nested one level inside <header class="wp-block-template-part">. A sticky element can
   only "travel" within its containing block's box — and <header> here wraps its content
   snugly, exactly as tall as the header bar itself, leaving zero slack. So the pattern
   block gets pushed out the moment you scroll at all; verified with a headless-browser
   scroll test (rect.top tracked scrollY 1:1, i.e. behaved fully static despite
   getComputedStyle correctly reporting position:sticky). No CSS on the inner block can
   fix this — its containing block is too short by design.
   <header>'s OWN containing block is .wp-site-blocks, which spans the full page, so
   applying sticky one level higher — directly on <header> — gives it the room it needs.
   Confirmed stuck at rect.top:0 through a full-page scroll test. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;

   &:has(.is-scrolled) > .wp-block-group.gapless-group {
      box-shadow: 0 0 8px rgb(0 0 0 / 0.1);
   }
}

/* Shrinking sticky header: front-end.js (above) toggles .is-scrolled
   directly on .site-header once scrollY > 0. The transitions live on the
   elements' resting state, not inside .is-scrolled, so toggling the class
   animates smoothly in both directions — shrinking on scroll down, growing
   back on scroll to top — rather than snapping.
   Logo/nav shrink via real width/font-size, not transform:scale(): scale
   only changes how an element is PAINTED, not the box it reserves in
   layout — confirmed with the inspector mid-scroll, .site-brand still
   measured its full, unscaled 410×84 regardless of .is-scrolled. So the
   header's actual height barely changed even though its contents looked
   smaller; only the padding reduction below was doing any real work.
   width/font-size genuinely reflow, which is what a shorter bar needs. */
.site-brand .wp-block-site-logo img {
   width: 410px;
   height: auto;
   transition: width 0.3s ease;
}

/* !important on both: needed to beat the has-{size}-font-size utility
   classes that otherwise set this per nav item (core's own, and, between
   1024-1540px, this theme's own override further below) — both apply
   !important themselves, at up to 3 classes' worth of specificity, so
   .wp-block-navigation-item is repeated here to reach 4 and reliably win
   regardless of those rules' position in this file. em-based padding
   (.5em 1em, from core) rides along with font-size automatically, which is
   most of what actually shortens the bar. */
.wp-block-navigation-item.wp-block-navigation-item {
   transition: font-size 0.3s ease;
}

.site-header {
   transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}

.site-header.is-scrolled {
   /* !important: the header block's own padding is a block attribute, which
      WP renders as an inline style — the one thing with enough specificity
      to beat that from an external stylesheet. */
   padding-top: var(--wp--preset--spacing--spacing-half) !important;
   padding-bottom: var(--wp--preset--spacing--spacing-half) !important;

   /* .site-brand (not the more general .wp-block-site-logo) — the mobile
      overlay panel has its own, separate site-logo instance (part of the
      Navigation Overlay pattern), which also happens to be a DOM
      descendant of this same .site-header once the overlay's markup is
      open. Scoping to .site-brand, the header's own logo wrapper, is what
      keeps that overlay logo from shrinking too. */
   .site-brand .wp-block-site-logo img {
      width: 205px;
   }

   /* Direct children of .wp-block-navigation__container only — top-level
      items, not `.wp-block-navigation-item` unqualified — so a flyout
      submenu's own items (also .wp-block-navigation-item, just nested
      several levels deeper inside a .wp-block-navigation__submenu-
      container) are left alone. :not(.is-menu-open): the same top-level
      item classes are reused inside the fullscreen mobile overlay once
      opened; excluding that state stops its text from also shrinking just
      because the page happened to be scrolled when it was opened.
      x-small on its own read too small — halfway between it and the
      resting medium size (calc(), not a hardcoded value, so it stays
      correct if either preset's size is ever changed) reads better while
      still visibly shrinking. */
   .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.wp-block-navigation-item {
      font-size: calc((var(--wp--preset--font-size--medium) + var(--wp--preset--font-size--x-small)) / 2) !important;
   }
}

/* The 10px radius below rounds the <ul>'s own box, but core switches this container's
   overflow from hidden to visible the instant it opens (needed so nested sub-submenus
   aren't clipped) — so it no longer clips its children to that curve. Every item inherits
   an opaque white background all the way down to the link (background-color:inherit), and
   sits flush against the container's edges, so its square corners just paint over the
   rounded ones. Confirmed via a headless-browser screenshot of the opened menu: computed
   border-radius was correctly 10px, but the panel rendered fully square. Rounding the
   first/last item's own corners (rather than forcing overflow:hidden, which would clip any
   deeper nested submenu) fixes it without touching that behavior.
   Excluded from .wp-block-navigation__overlay-container: inside the mobile overlay menu,
   submenus render inline/static rather than as a floating dropdown, so this panel styling
   (rounded corners, shadow, padding) doesn't apply there. */
ul.wp-block-navigation__submenu-container:not(.wp-block-navigation__overlay-container *) {
   border-radius: 10px !important;
   border: none !important;
   box-shadow: 0 0 8px rgb(0 0 0 / 0.1);
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   
      font-size: var(--wp--preset--font-size--small) !important;
   

   > .wp-block-navigation-item:first-child,
   > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
   }
   > .wp-block-navigation-item:last-child,
   > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
   }
   
}

.wp-block-navigation__overlay-container .wp-block-navigation-item.has-child {
      gap: 0!important;
   }

   .wp-block-navigation__overlay-container .wp-block-navigation__container > .wp-block-navigation-item > a {
      font-weight: bold !important;
   }

/* Move the Navigation block's mobile/desktop breakpoint from core's fixed 600px to 1024px.
   The collapse-to-hamburger behavior is entirely CSS, hardcoded to @media(min-width:600px)
   with no theme.json setting or custom property to adjust it — so between 600px and 1023px
   core's own rules would otherwise already be in "desktop" mode. Counteract that range and
   apply the real desktop styles starting at 1024px instead. */
@media (max-width: 1023px) {
   .wp-block-navigation__responsive-container:not(.is-menu-open) {
      display: none !important;
   }
   .wp-block-navigation__responsive-container-open {
      display: flex !important;
   }

    .nav-cta-row {
      flex-direction: row-reverse;
   }

   /* Logo pinned left, hamburger toggle pinned right — space-between,
      not center, so the two don't clump together in the middle of the
      bar with empty space at both outer edges. The narrower <600px rule
      below still takes over for the fully-wrapped (logo-on-its-own-row)
      case, since it's more specific and sets its own explicit centering. */
   .site-header {
      row-gap: 0.5rem !important;
      justify-content: space-between;
   }

}
@media (min-width: 1024px) {
   .wp-block-navigation__responsive-container {
      display: flex !important;
   }
   .wp-block-navigation__responsive-container-open {
      display: none !important;
   }
}
@media (min-width: 1024px) and (max-width: 1540px) {
   .wp-block-navigation__responsive-container .has-medium-font-size.wp-block-navigation-item {
      font-size: var(--wp--preset--font-size--small) !important;
   }

   /* The scroll-shrink rule further up computes its midpoint against
      medium, this breakpoint's own resting size above is small instead —
      overriding with the small/x-small midpoint here keeps the shrink
      proportional to whatever's actually resting at this width, rather
      than (small resting) and (medium/x-small midpoint) landing on the
      same value and producing no visible shrink at all. */
   .site-header.is-scrolled .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item.wp-block-navigation-item {
      font-size: calc((var(--wp--preset--font-size--small) + var(--wp--preset--font-size--x-small)) / 2) !important;
   }

   /* At this width the full nav (5 top-level items + dropdowns + the CTA
      button) doesn't comfortably fit beside the logo on one line — but
      .site-header, .site-brand and .nav-cta-row are all set to
      flexWrap:"nowrap" as block attributes, so nothing was actually
      wrapping; the nav items were just cramming/overlapping internally
      instead. Force an intentional two-row layout instead: logo centered
      on its own row, full nav+button row centered underneath. */
   .site-header {
      flex-wrap: wrap !important;
      justify-content: center !important;
      row-gap: 0.5rem !important;
   }

   .site-brand {
      flex-basis: 100%;
      justify-content: center !important;
      margin: 0 !important;
   }

   .nav-cta-row {
      flex-basis: 100%;
      justify-content: center !important;
      margin: 0 !important;
   }

   /* At this breakpoint the logo sits stacked above the nav row rather than
      beside it — true separate sticky/non-sticky positioning (logo
      scrolling away normally, nav row staying pinned on its own) isn't
      practical here: position:sticky only travels within its own direct
      parent's box, which is why <header> itself (not the inner pattern
      block) is what's sticky at all — see that rule further up. Giving
      .nav-cta-row real sticky-on-its-own behavior would mean re-parenting
      it up near .wp-site-blocks, a structural template change. Collapsing
      the logo row to nothing once scrolled — reusing the same .is-scrolled
      toggle already driving the shrink-on-scroll effect — reads the same
      as "logo scrolls off, nav stays pinned" without touching the sticky
      positioning that's already proven to work correctly. */
   .site-brand {
      max-height: 200px;
      overflow: hidden;
      opacity: 1;
      transition: max-height 0.3s ease, opacity 0.3s ease;
   }

   .site-header.is-scrolled {
      row-gap: 0 !important;

      .site-brand {
         max-height: 0;
         opacity: 0;
         pointer-events: none;
      }
   }

}
@media (max-width: 599px) {
   /* Blockbase's own ponyfill.css has this exact same selector at this
      exact same breakpoint, also setting text-align:center — !important
      here (not just relying on child-theme load order) is what actually
      wins over it. */
   .wp-site-blocks .site-header .wp-block-site-logo {
      flex-basis: 100%;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
      text-align: left !important;
   }
}

/* Blockbase's ponyfill.css deliberately pads the mobile menu's fullscreen overlay using
   our own --wp--custom--gap--horizontal token, leaving a strip on each side where the
   page's real background shows through instead of the overlay. Zero it so the overlay
   spans the full viewport edge to edge; nav links keep their own built-in padding
   (.5em 1em, from core), so the text still isn't flush against the edge. */
.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
   padding: 0 !important;
   background: rgba(255, 255, 255, 0.65) !important;
   backdrop-filter: blur(10px) !important;
}

/* Navigation Overlay pattern (parts/navigation-overlay.html): the backdrop
   above stays full-bleed, but the actual menu content (logo + nav links —
   .nav-overlay-menu, the middle of the overlay's 3 stacked sections) reads
   better as a narrow, centered column than stretched edge to edge. Turning
   the top-level .nav-overlay into a flex column lets that middle section
   grow to fill the leftover vertical space between the close button (top)
   and the primary-colour logo/social row (bottom) without touching either
   of those — then it centers its own content (logo, nav) within that
   space, and is capped to 300px and auto-margined for the horizontal
   centering. */
.nav-overlay {
   display: flex;
   flex-direction: column;
}

.nav-overlay-menu {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 450px;
   margin-left: auto;
   margin-right: auto;
}

.wp-block-navigation .sub-item.wp-block-navigation-link {
   a:before {
      content: '– ';
      margin-right: 0.5rem;
   }
}

.wp-block-button.is-style-outline,
.wp-block-button {
   a.wp-block-button__link {
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
      &:hover {
         transform: translateY(-1px);
         background-color: var(--wp--custom--color--secondary) !important;
         color: var(--wp--custom--color--background) !important;
         border-color: var(--wp--custom--color--secondary) !important;
      }
   }
}
/* The "Link" Button style's CSS now lives in
   assets/css/button-link-style.css, loaded via register_block_style()'s
   style_handle in functions.php — see that file for why. */

.has-secondary-background-color > .wp-block-buttons {
   a.wp-block-button__link {
      &:hover {
         background-color: var(--wp--custom--color--background) !important;
         color: var(--wp--custom--color--primary) !important;
         border-color: var(--wp--custom--color--background) !important;
      }
   }
}

.partners-logo-grid.wp-block-post-template.is-layout-grid {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
   gap: 3rem;
   row-gap: 0;

   .wp-block-post {
      flex: 1 1 100px;
      max-width: 100px;
      padding: 0;
   }
}
.mm-faqs__item {
   transition: all 0.2s ease-in-out;
}

/* theme.json's own line-height for h1-h4 (mapped to xxx-large through large)
   only applies when that font size is actually used on the matching
   heading level — not when xxx-large or 4x-large is picked on some other
   block (a paragraph, a differently-leveled heading), which instead falls
   back to the global 1.7 line-height and reads far too loose at that size.
   These two font-size classes always get 1.25em regardless of block type
   or heading level. WordPress's own slug-to-class conversion turns the
   "4x-large" slug into "has-4-x-large-font-size" (hyphen inserted between
   the digit and the letter), not "has-4x-large..."; "xxx-large" has no
   digit, so it converts straightforwardly to "has-xxx-large-font-size". */
.has-xxx-large-font-size,
.has-4-x-large-font-size {
   line-height: 1.25em;
}

.pum-theme-content-only { 
backdrop-filter: blur(10px) !important;
background-color: rgba(0, 0, 0, 0.40) !important;
}
.pum-theme-387 .pum-content + .pum-close, .pum-theme-content-only .pum-content + .pum-close {
   font-weight: 300 !important;
   font-size: 32px !important;
}

.person-name-row.wp-block-group  {
   * {
      display: inline !important;
      margin: 0 !important;
      font-size: var(--wp--custom--font-size--2x-large) !important;
      color: var(--wp--custom--color--primary) !important;
      font-size: var(--wp--preset--font-size--x-large) !important;
   }
   p {
      opacity: 0.5;
   }
   .wp-block-post-title {
      font-weight: 700 !important;

   }
}

/* .research-library-query-loop.wp-block-query {
   ul.wp-block-post-template {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      flex-direction: row;
      align-items: stretch;

      li.wp-block-post {
         flex: 1 1 300px;
         max-width: 300px;
      }
   }
} */

.cat-pills {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-start;

   /* Core's Post Terms block always renders a ", " separator span between
      terms. Redundant here since each term is already its own visually
      separated pill (spaced via the anchor's own margin-right below), and
      hiding it here — rather than clearing the block's Separator setting —
      keeps this fixed even if the pattern isn't synced everywhere. */
   .wp-block-post-terms__separator {
      display: none;
   }

   a {
      background-color: var(--wp--preset--color--light);
      display: block;
      font-size: 11px !important;
      font-weight: 5700;
      text-decoration: none;
      color: var(--wp--preset--color--primary);
      border-top-left-radius: 999px;
    border-top-right-radius: 999px;
    border-bottom-left-radius: 999px;
    border-bottom-right-radius: 999px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: var(--wp--preset--spacing--spacing-half);
    margin-left: 0;
      margin-bottom: var(--wp--preset--spacing--spacing-half);

      &:hover {
         background-color: var(--wp--preset--color--secondary);
      }
   }
}

/* "Source" box appended after single-post content — see the
   render_block_core/post-content filter in functions.php. */
.mm-post-source {
   background: var(--wp--preset--color--light);
   border-radius: var(--wp--custom--border--radius--standard);
   padding: var(--wp--preset--spacing--spacing-3);
   margin-top: var(--wp--preset--spacing--spacing-3);

   display: flex;
   flex-direction: column;
   gap: var(--wp--preset--spacing--spacing-1);
}

.mm-post-source__label {
   font-weight: 600;
   color: var(--wp--custom--color--primary);
   margin: 0;
}

.mm-post-source__link {
   display: flex;
   align-items: flex-start;
   gap: 0.6em;
   color: var(--wp--custom--color--primary);
   text-decoration: none;

   &:hover {
      text-decoration: underline;
   }

   svg {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      margin-top: 0.3em;
   }
}

/* Matches the muted/x-small treatment the resource archive template gives
   its own publication-name block binding. */
.mm-post-source__publication {
   color: var(--wp--preset--color--muted);
   font-size: var(--wp--preset--font-size--x-small);
   font-weight: 400;
}

.is-style-post-category-icon:before {
    display: none !important;
}
.is-style-post-category-icon a{
   background-color: var(--wp--preset--color--light);
   padding: 0.25em 1.25em;
   border-radius: 999px;
   text-decoration: none !important;
   font-weight: 600;
   
}

.wp-block-group.post-meta {
   gap: 1.5rem !important;
   * {
      font-size: var(--wp--preset--font-size--x-small) !important;
      font-weight: 600;
   }
}
/* Core's Time To Read block has no icon option of its own — add a clock via
   ::before, rendered as a CSS mask (not a plain background-image) so it
   inherits the text's own color instead of being a fixed, uncolorable
   image. mask-mode: alpha is explicit because unprefixed mask-image
   defaults to luminance-based masking, which would hide a stroke-only icon
   like this one (transparent background, zero luminance throughout); the
   -webkit-mask-image copy is needed for Safari. */
.wp-block-post-time-to-read {
   display: inline-flex;
   align-items: center;
   gap: 0.3em;

   &::before {
      content: "";
      display: inline-block;
      width: 1em;
      height: 1em;
      flex-shrink: 0;
      background-color: currentColor;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7V12L15.5 14' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      mask-mode: alpha;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7V12L15.5 14' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      -webkit-mask-position: center;
   }
}

/* Constrains blog card thumbnails (real or placeholder) to a consistent
   16:9 box so the Index template's grid lines up regardless of each post's
   own image dimensions — or whether it has one at all (see the
   render_block_core/post-featured-image filter in functions.php).
   Scoped to .wp-block-post-template specifically (Query Loop cards only)
   so it doesn't also affect the Single Posts template's full-width hero
   featured image, which uses a completely different layout. */
.wp-block-post-template .wp-block-post-featured-image.blog-post-feature-image {
   overflow: hidden;
   display: block;

   > a {
      display: block;
      width: 100%;
      height: 100%;
   }

   img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
   }
}

.mm-featured-image-placeholder {
   background-color: var(--wp--preset--color--light);
   border-radius: 10px;
}

/* Blog index category filter pills — see the render_block_core/categories
   filter in functions.php for the "All" pill + post-type scoping. */
.wp-block-categories-list {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5em;
   list-style: none;
   margin: 0;
   padding: 0;
   font-size: var(--wp--preset--font-size--small);
}

.wp-block-categories-list .cat-item {
   margin: 0;
}

.wp-block-categories-list .cat-item a {
   display: block;
   background-color: var(--wp--preset--color--light);
   color: var(--wp--custom--color--primary);
   text-decoration: none;
   font-weight: 600;
   border-radius: 999px;
   padding: 0.5em 1em;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.wp-block-categories-list .cat-item a:hover {
   background-color: var(--wp--custom--color--secondary);
   color: var(--wp--custom--color--background);
}

.wp-block-categories-list .cat-item.current-cat a {
   background-color: var(--wp--custom--color--primary);
   color: var(--wp--custom--color--background);
}

/* Research Library page's search field — a plain outlined pill with the
   icon sitting inside, no visible button. Theme.json's global button
   styling (styles.elements.button) fills every .wp-element-button with a
   solid background + padding site-wide, which the search block's submit
   button also carries — override just that here rather than touching the
   global button style everywhere else relies on. */
.research-library-search .wp-block-search__button {
   background: transparent;
   color: var(--wp--custom--color--primary);
   /* Both the implicit approach (stretch + aspect-ratio deriving width)
      and the percentage approach (height:100% + aspect-ratio) turned out
      not to hold reliably here. Matching two explicit, identical fixed
      values — this button's width/height against the wrapper's own fixed
      height below — leaves nothing for the browser to derive or get
      wrong: it's a 3rem square (and, via the 999px radius already set as
      a block attribute/inline style, a circle) no matter what. */
   width: 3rem;
   height: 3rem;
   /* Core's base search-block CSS puts a 10px margin-left on this button
      (spacing it from the input in the default, non-inside layout) — that
      margin was also opening the unwanted gap between the circle and the
      wrapper's right inner edge here. */
   margin: 0;
   flex-shrink: 0;
   display: grid;
   place-content: center;
}

.research-library-search .wp-block-search__button:hover {
   background: var(--wp--preset--color--light);
   color: var(--wp--custom--color--secondary);
}

.research-library-search .wp-block-search__button svg {
   width: 18px;
   height: 18px;
}

/* Explicit fixed height — matched exactly by the button's own width/height
   above — rather than an auto/content-derived one, so the pill's overall
   height and the circle's size are two hardcoded values guaranteed to
   agree, not one trying to infer the other through flex stretch/aspect-
   ratio (both of which turned out not to hold reliably here). The input
   below is left at the default align-items:stretch, so it still fills
   this same height automatically. No padding of its own — the input's
   own padding creates the pill's inner spacing on the left. */
.research-library-search .wp-block-search__inside-wrapper {
   height: 3rem;
   padding: 0 !important;
}

/* The input must carry NO border/outline/shadow of its own — only the
   wrapper's border should be visible. Core's base CSS already sets
   `border:none` on the input in button-inside mode via a :where() (zero-
   specificity) rule, and also sets `-webkit-appearance:initial` (not
   `none`), which on Chrome/Safari lets the OS's own native
   <input type="search"> decoration (its own faint rounded inset "field")
   render underneath regardless of the CSS border — that native chrome,
   not a real CSS border, was the second "pill" outline. `!important`
   throughout so this can't lose to load order or a cached stylesheet. */
.research-library-search .wp-block-search__input {
   appearance: none !important;
   -webkit-appearance: none !important;
   background: transparent !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
   padding: 12px 4px 12px 24px !important;
   color: var(--wp--custom--color--primary) !important;
   
}

.research-library-search .wp-block-search__input::placeholder {
   /* "body" is only a palette entry (--wp--preset--color--*), not one of
      the four custom shorthands (--wp--custom--color--*) this theme
      defines — foreground/background/primary/secondary only. Using the
      --custom-- prefix here resolved to nothing, silently no-oping the
      whole declaration and leaving the browser's own faint default. */
   color: var(--wp--custom--color--primary) !important;
   opacity: 1;
}

/* Research Library page's category sidebar — see the render_block_core/
   categories filter in functions.php, which builds this list as self-links
   with a ?resource_category= query arg rather than core's default of
   linking each term out to its own taxonomy archive. A vertical list (not
   the blog's pill-bar styling above) since this sidebar holds ~13 items
   at once; collapses to a wrapping pill row once wp:columns itself stacks
   (WP's own 782px breakpoint) so it reads as a compact filter bar instead
   of a long list pushing the results down the page. */
.research-library-filters {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.35em;
   font-size: var(--wp--preset--font-size--small);
}

.research-library-filters .cat-item a {
   display: block;
   padding: 0.4em 0.75em;
   border-left: 2px solid transparent;
   border-radius: 0 6px 6px 0;
   color: var(--wp--custom--color--body);
   text-decoration: none;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.research-library-filters .cat-item a:hover {
   background-color: var(--wp--preset--color--light);
   color: var(--wp--custom--color--primary);
}

.research-library-filters .cat-item.current-cat a {
   border-left-color: var(--wp--custom--color--primary);
   background-color: var(--wp--preset--color--light);
   color: var(--wp--custom--color--primary);
   font-weight: 600;
}

@media (max-width: 781px) {
   .research-library-filters {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.5em;
   }

   .research-library-filters .cat-item a {
      border-left: none;
      border-radius: 999px;
      background-color: var(--wp--preset--color--light);
   }

   .research-library-filters .cat-item.current-cat a {
      border-left: none;
      background-color: var(--wp--custom--color--primary);
      color: var(--wp--custom--color--background);
   }
}

.yoast-breadcrumbs a {
   text-decoration: none;
}
.yoast-breadcrumbs span span {
   margin: 0 0.5rem;
   &:first-child {
      margin-left: 0;
   }
}

.wp-block-query-pagination {
   .wp-block-query-pagination-numbers {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      .page-numbers {
         background-color: var(--wp--custom--color--primary);
         color: var(--wp--custom--color--background);
         border-radius: 999px;
         padding: 0.5em 0.5em;
         width: 40px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-decoration: none;
         font-weight: 600;
         transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

         &.current {
            background-color: var(--wp--custom--color--secondary);
            color: var(--wp--custom--color--background);
         }
      }
   }
}

.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    fill: currentColor;
    display: block;
    height: 40px;
    pointer-events: none;
    width: 40px;
}

.timeline-marker-column.wp-block-column {

   & > .wp-block-group.timeline-number {
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   & > .wp-block-group:not(.timeline-number) {
      flex-grow: 1;
      height: 100%;
      width:2px;
      margin: 0 auto;
   }
}

/* Numbered step badge (e.g. Veterans page "How it works"): a fixed circle
   rather than a pill — core's .has-background padding on <p> would
   otherwise stretch it into a wide oval around a single digit. */
p.step-number {
   width: 48px;
   height: 48px;
   padding: 0 !important;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}

/* Cover that fills its whole column in a side-by-side image/text row, so
   the image always matches the text column's height. min-height (set in
   the block) still applies once columns stack on mobile, where height:100%
   of an auto-height column falls back to auto. */
.wp-block-column > .wp-block-cover.cover-fill {
   height: 100%;
}

@media screen and (max-width: 767px) {
   .hide-mobile {
      display: none !important;
   }
}

p {
   max-width: 100%;
}

/* File block (core/file) — a bordered card spanning the full row, download
   icon + filename on the left, an outline pill "Download" button on the
   right, instead of core's plain default of an inline underlined link
   followed by a small filled button. */
.wp-block-file {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 1rem;
   background-color: var(--wp--preset--color--background);
   border: 1px solid var(--wp--preset--color--hairline);
   border-radius: var(--wp--custom--border--radius--standard);
   padding: 1rem 1.5rem;
}

.wp-block-file > a:first-child {
   display: flex;
   align-items: center;
   gap: 0.6em;
   color: var(--wp--custom--color--primary);
   text-decoration: none;
   font-weight: 500;
}

.wp-block-file > a:first-child::before {
   content: "";
   display: inline-block;
   width: 1.1em;
   height: 1.1em;
   flex-shrink: 0;
   background-color: currentColor;
   /* mask-mode:alpha (plus the -webkit- duplicate for Safari) — same
      technique as the Time To Read block's clock icon in this file — so
      this renders as a solid icon in currentColor rather than being hidden
      by the default luminance-based masking a transparent-background,
      stroke-only SVG would otherwise get. */
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   mask-repeat: no-repeat;
   mask-size: contain;
   mask-position: center;
   mask-mode: alpha;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   -webkit-mask-position: center;
}

/* Two classes here (vs. theme.json's single-class .wp-element-button rule
   that fills every button site-wide with a solid background) already win on
   specificity alone, but !important matches how every other button-pattern
   override in this file handles that same rule, for consistency. */
.wp-block-file .wp-block-file__button.wp-element-button {
   background-color: transparent !important;
   color: var(--wp--custom--color--primary) !important;
   border: 1.5px solid var(--wp--custom--color--primary) !important;
   border-radius: var(--wp--custom--border--radius--button) !important;
   padding: 0.6em 1.75em !important;
   font-weight: 500;
}

.wp-block-file .wp-block-file__button.wp-element-button:hover {
   background-color: var(--wp--custom--color--primary) !important;
   color: var(--wp--custom--color--background) !important;
}
.wp-block-navigation .sub-item.wp-block-navigation-link {
& a {
    display: flex;
    align-items: center;
}
& a::before {
    content: "";
    flex-shrink: 0;
    width: 0.35em;
    height: 0.35em;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-right: 0.6rem;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
& a:hover::before {
    opacity: 1;
    transform: translateX(3px) rotate(45deg);
}
}