/*
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.0
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
*/

html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px;
}
/* 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);
   }
}

/* 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;
   }

   /* 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;
   }

}
@media (max-width: 599px) {
   .wp-site-blocks .site-header .wp-block-site-logo {
      flex-basis: 100%;
      margin-bottom: 0 !important;
      margin-top: 0 !important;
      text-align: center;
   }
}

/* 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;
   }
}

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

p {
   max-width: 100%;
}