/*
Theme Name: Modern Blocks
Theme URI: https://modernwpthemes.com/themes/modern-blocks
Author: Modern Blocks
Description: Meet Modern Blocks, a sleek and lightweight FSE (Full Site Editing) theme. It's super fast and uses the WordPress blocks editor to create cool layouts. Perfect for blogs, startups, small businesses, law firms, and creative agencies that want simple and speedy websites.
Requires at least: 5.9
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: modern-blocks
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, blog, e-commerce, wide-blocks
*/
/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Forms
--------------------------------------------- */
.button,
.button:visited,
button:not(.wp-block-navigation-submenu__toggle):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.e2g-faq-item__trigger):not(.e2g-testimonials-btn):not(.e2g-testimonials-dot):not(.e2g-dialog-close-icon):not(.wp-block-button__link):not(.e2g-htl__btn):not(.ao-form-submit),
.wp-block-search__button,
input[type=button],
input[type=reset],
input[type=submit] {
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  border: none;
  border-radius: 5px;
  background: linear-gradient(to right, transparent 50%, var(--wp--preset--color--primary) 50%);
  background-size: 200% 100%;
  background-position: right center;
  color: var(--wp--preset--color--background);
  line-height: 1;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-position 0.4s ease-in-out, color 0.4s ease-in-out;
}

.button:hover,
button:not(.wp-block-navigation-submenu__toggle):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.e2g-dialog-close-icon):not(.wp-block-button__link):not(.e2g-htl__btn):not(.ao-form-submit):hover,
.wp-block-search__button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
.button:focus,
button:not(.wp-block-navigation-submenu__toggle):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):not(.e2g-dialog-close-icon):not(.wp-block-button__link):not(.e2g-htl__btn):not(.ao-form-submit):focus,
.wp-block-search__button:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus {
  background-position: left center;
  color: var(--wp--preset--color--primary);
}

/* Act-On form submit button — the embed stores background-color:transparent as an inline
   style, so !important is required to override it and produce a visible button. */
.ao-form-submit {
  background-color: var(--wp--preset--color--primary) !important;
  background-image: none !important;
  transition: opacity 0.15s ease !important;
}

.ao-form-submit:hover,
.ao-form-submit:focus {
  opacity: 0.8;
  color: #ffffff !important;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
select,
textarea {
  font-family: inherit;
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--base);
  border: none;
  border: 1px solid var(--wp--preset--color--quinary);
  border-radius: 5px;
  padding: 0.5em;
  width: 100%;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
select:focus,
textarea:focus {
  outline: 1px solid var(--wp--preset--color--secondary);
}

select {
  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  background-image: url(assets/images/icon-downarrow.png);
  background-repeat: no-repeat;
  background-position: top 50% right 1em;
  background-size: 16px;
}

.select2-container--default .select2-selection--single {
  border: 1px solid var(--wp--preset--color--quinary);
  border-radius: 5px;
}

/* List
--------------------------------------------- */
ul li a,
ol li a,
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-query-pagination-numbers a,
.wp-block-post-excerpt a,
.wp-block-navigation ul,
.wp-block-navigation ul li,
.wp-block-navigation ul li a,
.wp-block-comment-author-name a,
.wp-block-comment-date a,
.wp-block-post-date a,
.wp-block-post-terms a,
.wp-block-post-author-name a,
footer ul li a {
  color: inherit;
  text-decoration: inherit;
}

.wp-block-navigation ul.wp-block-navigation-submenu {
  padding: 0;
}

.wp-block-navigation-item__content {
  white-space: nowrap;
}

.wp-block-navigation-item__content:hover,
.wp-block-navigation-submenu__toggle:hover {
  color: #ffffff !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base) !important;
  background-color: #ffffff;
}

.wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon {
  transition: transform 0.2s ease;
}
.wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* Responsive menu styles
--------------------------------------------- */
.wp-block-navigation__responsive-container-open {
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(246, 246, 246, 0.4);
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
  background-color: var(--wp--preset--color--senary);
  flex-shrink: 0;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
  padding-top: 30px;
  background-color: var(--wp--preset--color--secondary) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
  align-items: flex-start;
  width: 100%;
  gap: 30px;
}

/* Match desktop text color in overlay */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--tertiary) !important;
}

/* Top-level item hover — white */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle:hover {
  color: #ffffff !important;
}

/* Submenu item hover — base text on white bg */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base) !important;
  background-color: #ffffff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 1px solid rgba(246, 246, 246, 0.4);
  border-radius: 6px;
  padding: 8px;
  box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
  width: 100%;
  height: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation-submenu__toggle:where([aria-expanded=true]) + .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  position: static;
  padding-top: 0;
}

/* WordPress core switches to desktop nav at min-width:600px.
   Override to keep hamburger menu active up to 904px (below 905px). */
@media (min-width: 600px) and (max-width: 904px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (max-width: 904px) {
  header.wp-block-template-part {
    position: static;
  }
}

.page .wp-block-template-part,
.single .wp-block-template-part,
.archive .wp-block-template-part {
  margin-top: 0;
}

footer.wp-block-template-part {
  margin-top: 0;
}

nav.wp-block-query-pagination {
  margin-top: 6rem;
}

/* List styles
--------------------------------------------- */

/*
 * WordPress core sets list-style:none on .wp-block-post-template (the Query Loop
 * container ul). Because list-style is inherited, nested ul/ol inside post content
 * lose their markers. These rules restore defaults with low specificity so that
 * .is-style-none / .is-style-checklist / etc. (specificity 0,1,0) still win.
 */
:where(.wp-block-post-content) ul {
  list-style-type: disc;
}
:where(.wp-block-post-content) ol {
  list-style-type: decimal;
}

ul,
ul.is-style-default,
ul.is-style-square {
  padding-left: 22px;
}
ul.wp-block-social-links{
  padding-left: 0;
}
ol,
ol.is-style-default,
ol.is-style-square {
  padding-left: 22px;
}

ul.is-style-square {
  list-style-type: square;
}

.is-style-checklist,
.is-style-checklist-circle,
.is-style-none {
  list-style: none;
  padding-left: 0;
}

.is-style-checklist li {
  display: flex;
  align-items: flex-start;
}

.is-style-checklist li::before {
  content: "";
  mask: url(assets/images/checklist.svg);
  -webkit-mask: url(assets/images/checklist.svg);
  height: 1.5em;
  width: 1.5em;
  min-height: 1.5em;
  min-width: 1.5em;
  background: currentcolor;
  align-self: center;
}

.is-style-checklist-circle li {
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
}

.is-style-checklist-circle li::before {
  content: "";
  mask: url(assets/images/checklist-circle.svg);
  -webkit-mask: url(assets/images/checklist-circle.svg);
  height: 1em;
  width: 1em;
  min-height: 1em;
  min-width: 1em;
  background: currentcolor;
  align-self: center;
}

/* Button Block
--------------------------------------------- */
.button {
  line-height: 1;
  border-radius: 5px;
}

.wp-block-button[style*=text-decoration] .wp-block-button__link {
  text-underline-offset: 5px;
}

/* ============================================
   Button Color System
   Apply class names via "Additional CSS class"
   in the WordPress block editor on the Button
   block (not the inner link — the wrapper).

   SOLID:   btn-blue | btn-teal | btn-green
            btn-white | btn-orange | btn-sky

   OUTLINE: btn-outline-blue | btn-outline-teal
            btn-outline-green | btn-outline-white
            btn-outline-orange | btn-outline-sky

   TEXT:    btn-text
   ============================================ */

/* Base: structure shared by all block buttons */
.wp-block-button__link {
  background-color: transparent;
  background-size: 200% 100%;
  background-position: right center;
  transition: background-position 0.4s ease-in-out, color 0.4s ease-in-out;
}

/* Reset browser button defaults when a <button> carries the block-button class */
button.wp-block-button__link {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-position: left center;
}

/* ------------------------------------------
   Solid buttons
   Default: colored bg, white text
   Hover:   transparent bg, colored text
   ------------------------------------------ */

/* Blue — #1c4da1 (primary) */
.btn-blue .wp-block-button__link {
  background-image: linear-gradient(to right, transparent 50%, #1c4da1 50%);
  color: #ffffff;
}
.btn-blue .wp-block-button__link:hover,
.btn-blue .wp-block-button__link:focus {
  color: #1c4da1;
}

/* Teal — #008687 (Industry Insights) */
.btn-teal .wp-block-button__link {
  background-image: linear-gradient(to right, transparent 50%, #008687 50%);
  color: #ffffff;
}
.btn-teal .wp-block-button__link:hover,
.btn-teal .wp-block-button__link:focus {
  color: #008687;
}

/* Green — #00ae42 (Events) */
.btn-green .wp-block-button__link {
  background-image: linear-gradient(to right, transparent 50%, #00ae42 50%);
  color: #ffffff;
}
.btn-green .wp-block-button__link:hover,
.btn-green .wp-block-button__link:focus {
  color: #00ae42;
}

/* White — #ffffff (for dark backgrounds) */
.btn-white .wp-block-button__link {
  background-image: linear-gradient(to right, transparent 50%, #ffffff 50%);
  color: #1c4da1;
}
.btn-white .wp-block-button__link:hover,
.btn-white .wp-block-button__link:focus {
  color: #ffffff;
}

/* Orange — #f6871f (Practices) */
.btn-orange .wp-block-button__link {
  background-image: linear-gradient(to right, transparent 50%, #f6871f 50%);
  color: #ffffff;
}
.btn-orange .wp-block-button__link:hover,
.btn-orange .wp-block-button__link:focus {
  color: #f6871f;
}

/* Sky — #00b2e2 (Software) */
.btn-sky .wp-block-button__link {
  background-image: linear-gradient(to right, transparent 50%, #00b2e2 50%);
  color: #ffffff;
}
.btn-sky .wp-block-button__link:hover,
.btn-sky .wp-block-button__link:focus {
  color: #00b2e2;
}

/* ------------------------------------------
   Outline buttons
   Default: transparent bg, colored border + text
   Hover:   colored bg sweeps in, white text
            (btn-outline-white → dark text on hover)
   ------------------------------------------ */

/* Blue outline — #1c4da1 */
.btn-outline-blue .wp-block-button__link {
  background-image: linear-gradient(to right, #1c4da1 50%, transparent 50%);
  border: 2px solid #1c4da1;
  color: #1c4da1;
}
.btn-outline-blue .wp-block-button__link:hover,
.btn-outline-blue .wp-block-button__link:focus {
  color: #ffffff !important;
}

/* Teal outline — #008687 */
.btn-outline-teal .wp-block-button__link {
  background-image: linear-gradient(to right, #008687 50%, transparent 50%);
  border: 2px solid #008687;
  color: #008687;
}
.btn-outline-teal .wp-block-button__link:hover,
.btn-outline-teal .wp-block-button__link:focus {
  color: #ffffff;
}

/* Green outline — #00ae42 */
.btn-outline-green .wp-block-button__link {
  background-image: linear-gradient(to right, #00ae42 50%, transparent 50%);
  border: 2px solid #00ae42;
  color: #00ae42;
}
.btn-outline-green .wp-block-button__link:hover,
.btn-outline-green .wp-block-button__link:focus {
  color: #ffffff !important;
}

/* White outline — #ffffff (for dark backgrounds) */
.btn-outline-white .wp-block-button__link {
  background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);
  border: 2px solid #ffffff;
  color: #ffffff;
}
.btn-outline-white .wp-block-button__link:hover,
.btn-outline-white .wp-block-button__link:focus {
  color: #333333;
}

/* Orange outline — #f6871f */
.btn-outline-orange .wp-block-button__link {
  background-image: linear-gradient(to right, #f6871f 50%, transparent 50%);
  border: 2px solid #f6871f;
  color: #f6871f;
}
.btn-outline-orange .wp-block-button__link:hover,
.btn-outline-orange .wp-block-button__link:focus {
  color: #ffffff;
}

/* Sky outline — #00b2e2 */
.btn-outline-sky .wp-block-button__link {
  background-image: linear-gradient(to right, #00b2e2 50%, transparent 50%);
  border: 2px solid #00b2e2;
  color: #00b2e2;
}
.btn-outline-sky .wp-block-button__link:hover,
.btn-outline-sky .wp-block-button__link:focus {
  color: #ffffff;
}

/* ------------------------------------------
   Text CTA
   Default: base color text, no bg/border
   Hover:   primary blue text
   ------------------------------------------ */

.btn-text .wp-block-button__link {
  background-image: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: #434343;
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s ease-in-out;
}
.btn-text .wp-block-button__link:hover,
.btn-text .wp-block-button__link:focus {
  background-color: transparent;
  color: #1c4da1;
}

/* Separator Block
--------------------------------------------- */
hr.wp-block-separator.has-background {
  height: 2px !important;
}
hr.wp-block-separator.is-style-dots {
  height: auto !important;
}
hr.wp-block-separator.is-style-dotted {
  width: 100% !important;
  border-bottom: none !important;
  height: 1px !important;
  background: repeating-linear-gradient(90deg, currentcolor, currentcolor 2px, transparent 2px, transparent 6px) !important;
}
hr.wp-block-separator.is-style-wide-thin-line {
  height: 1px !important;
  border-width: 1px !important;
  width: 100% !important;
}
hr.wp-block-separator.is-style-left-aligned {
  margin-left: 0 !important;
}
hr.wp-block-separator.is-style-right-aligned {
  margin-right: 0 !important;
}

/* Comment styles
--------------------------------------------- */
.wp-block-comment-template li.comment > .wp-block-columns {
  column-gap: 12px !important;
}
.wp-block-comment-template .wp-block-comment-content {
  border-radius: 10px;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

/* Single page and post styles
--------------------------------------------- */
.page .wp-block-post-content a,
.single-post .wp-block-post-content a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.page .wp-block-post-content h1,
.page .wp-block-post-content h2,
.page .wp-block-post-content h3,
.page .wp-block-post-content h4,
.page .wp-block-post-content h5,
.page .wp-block-post-content h6,
.single-post .wp-block-post-content h1,
.single-post .wp-block-post-content h2,
.single-post .wp-block-post-content h3,
.single-post .wp-block-post-content h4,
.single-post .wp-block-post-content h5,
.single-post .wp-block-post-content h6 {
  text-underline-offset: 5px;
  text-decoration-thickness: 2px !important;
}
.page .wp-block-post-content h1 a,
.page .wp-block-post-content h2 a,
.page .wp-block-post-content h3 a,
.page .wp-block-post-content h4 a,
.page .wp-block-post-content h5 a,
.page .wp-block-post-content h6 a,
.single-post .wp-block-post-content h1 a,
.single-post .wp-block-post-content h2 a,
.single-post .wp-block-post-content h3 a,
.single-post .wp-block-post-content h4 a,
.single-post .wp-block-post-content h5 a,
.single-post .wp-block-post-content h6 a {
  color: inherit;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.single .wp-block-post-navigation-link a {
  color: inherit;
  text-decoration: inherit;
}

/* Event / webinar "has passed" banner on single program pages */
.e2g-event-passed-banner {
  border-left: 4px solid #1c4da1;
  background: var(--wp--preset--color--tertiary);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  border-radius: 0 4px 4px 0;
}

.e2g-event-passed-banner p {
  margin: 0;
  color: var(--wp--preset--color--secondary);
  font-size: var(--wp--preset--font-size--medium, 1rem);
}

.e2g-event-passed-banner--webinar {
  border-left-color: #00793f;
}

.e2g-event-passed-banner--happening-now {
  border-left-color: #00793f;
}

.e2g-event-passed-banner a {
  color: #1c4da1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Search results */

.search-results .wp-block-post:first-child .wp-block-separator {
  display: none;
}

.search-result-item {
  gap: 16px;
  padding: var(--wp--preset--spacing--medium) 0;
}

.search-result-icon {
  display: block;
  flex-shrink: 0;
  margin-top: 3px;
  line-height: 0;
}

.search-result-icon svg {
  width: 28px;
  height: 28px;
}

.search-result-content .wp-block-post-terms {
  font-size: var(--wp--preset--font-size--small);
  color: #767676;
  margin-top: 2px;
}

.search-result-content .wp-block-read-more {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

@media (max-width: 768px) {
  .search-results .wp-block-post-template.is-flex-container.columns-2 > li {
    width: 100%;
  }
}

/* =====================================================
   Mobile responsive fixes
   ===================================================== */
@media (max-width: 781px) {
  /* Restore column stacking that auto-generated nowrap overrides */
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }

  /* Space-between nowrap flex groups (CTAs, footer logo+links rows).
     These are "heading on left, button/links on right" splits that appear
     sitewide. Stack them vertically and make each child full-width. */
  .wp-block-group.is-content-justification-space-between.is-nowrap.is-layout-flex {
    flex-wrap: wrap !important;
    gap: var(--wp--preset--spacing--medium) !important;
  }
  .wp-block-group.is-content-justification-space-between.is-nowrap.is-layout-flex > * {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Service card grid rows (12-col CSS grid) → stacked flex column.
     Interleaved [icon, content] siblings become natural card pairs. */
  main .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--wp--preset--spacing--medium) !important;
  }

  /* Limit service card icons so they don't stretch full-width when stacked */
  main .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid > .wp-block-image {
    max-width: 60px;
  }

  /* Post query grids: 2-col on small-tablet (600-781px) */
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Flex post template items: single column */
  .wp-block-post-template.is-flex-container > li {
    width: 100% !important;
  }
}

/* Post query grids: single column on phone (≤599px) */
@media (max-width: 599px) {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ── Site logo ─────────────────────────────────────────────────────── */
.wp-block-site-logo img {
  max-width: clamp(80px, 10vw, 160px);
}

/* ── Catalog Page template ─────────────────────────────────────────── */
.page-template-wp-custom-template-catalog-page h1 {
  font-size: var(--wp--preset--font-size--xxx-large) !important;
}

/* ── KB Quick Search cards ─────────────────────────────────────────── */
.kb-quick-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kb-quick-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}

/* Full-card overlay: the link-only button's ::after stretches across the whole card */
.kb-quick-card .wp-block-button.is-style-link-only a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

/* ── Docebo Course Cards [e2g_courses] ─────────────────────────────── */

.e2g-courses-carousel.swiper li.swiper-slide {
  display: flex;
  list-style: none;
  height: auto;
}

/* Cards use the same .related-post-div / wp-block-post-* classes as program
   cards — make them flex-column so the card fills the slide height. */
.e2g-docebo-item .related-post-div {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* PHP-generated Docebo items lack is-layout-flow, so they don't get the WP core
   block-gap margin. Apply it to all children (including first) to match the WP
   program post rendering, where :root :where(.is-layout-flow) > * wins over the
   :first-child reset because it appears later in the stylesheet. */
.e2g-docebo-item .related-post-div > * {
  margin-block-start: 24px;
}

/* WP 6.1+ injects inline style="aspect-ratio:W/H" on <img> based on attachment dimensions.
   Set aspect-ratio on the img itself with !important to override that inline value uniformly. */
.e2g-docebo-item .wp-block-post-featured-image {
  margin: 0;
  overflow: hidden;
}

.e2g-docebo-item .wp-block-post-featured-image a {
  display: block;
}

.e2g-docebo-item .wp-block-post-featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, filter;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.e2g-docebo-item .wp-block-post-featured-image a:hover img {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Session date — mirrors the visual weight of the Pods start_date field */
.e2g-docebo-date {
  font-size: var(--wp--preset--font-size--small);
  font-family: var(--wp--preset--font-family--proxima-nova, var(--wp--preset--font-family--poppins));
  color: var(--wp--preset--color--base);
  margin: 0 0 4px;
}

/* Table Block
--------------------------------------------- */
.wp-block-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  margin-left: 0;
  margin-right: 0;
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  border: none;
}

.wp-block-table thead tr {
  background-color: var(--wp--preset--color--primary);
}

.wp-block-table thead th {
  color: #ffffff;
  font-weight: 700;
  padding: 1rem 1.25rem;
  text-align: left;
  border: none;
  line-height: 1.4;
}

.wp-block-table tbody tr {
  border-bottom: 1px solid var(--wp--preset--color--quaternary);
  transition: background-color 0.15s ease;
}

.wp-block-table tbody tr:last-child {
  border-bottom: none;
}

.wp-block-table tbody tr:hover {
  background-color: var(--wp--preset--color--tertiary);
}

.wp-block-table tbody td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
  border: none;
}

.wp-block-table tbody td:first-child {
  font-weight: 600;
  color: var(--wp--preset--color--secondary);
  border-right: 1px solid var(--wp--preset--color--quaternary);
}

/* JS-built column-first mobile layout — hidden on desktop */
.e2g-table-mobile {
  display: none;
}

@media (max-width: 600px) {
  .wp-block-table {
    border-radius: 0;
    box-shadow: none;
  }

  /* Hide the HTML table; show the column-first layout instead */
  .wp-block-table table {
    display: none;
  }

  .e2g-table-mobile {
    display: block;
  }

  .e2g-table-mobile__col + .e2g-table-mobile__col {
    border-top: 3px solid var(--wp--preset--color--primary);
  }

  .e2g-table-mobile__header {
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    font-weight: 700;
    padding: 1rem 1.25rem;
    line-height: 1.4;
  }

  .e2g-table-mobile__cell {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wp--preset--color--quaternary);
  }

  .e2g-table-mobile__cell:last-child {
    border-bottom: none;
  }

  .e2g-table-mobile__col:first-child .e2g-table-mobile__cell {
    font-weight: 600;
    color: var(--wp--preset--color--secondary);
  }
}

/* Podcast badge on featured images — grid overlay avoids position:absolute
   inside a GPU-composited Swiper wrapper, preventing blink during transitions. */
figure.wp-block-post-featured-image:has(.e2g-podcast-badge) {
  display: grid;
}

figure.wp-block-post-featured-image:has(.e2g-podcast-badge) > * {
  grid-area: 1 / 1;
}

.e2g-podcast-badge {
  align-self: end;
  justify-self: start;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  pointer-events: none;
  z-index: 1;
}

.facetwp-term-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 0.4em;
  object-fit: contain;
}

/* ── Post image hover ──────────────────────────────────────────────────────── */
/* Linked featured images in query loops                                       */
a img.wp-post-image {
  display: block;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, filter 0.3s ease;
}

a:hover img.wp-post-image {
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* ── Hover Cover Cards ─────────────────────────────────────────────────────── */
/* Applied as an additional CSS class on WordPress Cover blocks.               */
/* Default: image only visible. Hover: dark overlay fades in, image zooms,    */
/* text and button slide up and appear.                                        */

/* Card container — shadow lift on hover, overflow clips the zooming image */
.hover-cover {
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.35s ease;
}

.hover-cover:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

/* The Cover block is flex-direction:row, so align-items controls the VERTICAL */
/* axis and justify-content controls horizontal. WP default is align-items:    */
/* center, which vertically centers the inner container — clipping long text   */
/* symmetrically top and bottom. align-items:flex-start pins content to the    */
/* top so the beginning of text is always the first thing visible.             */
/*                                                                              */
/* aspect-ratio:auto (needs !important to override the inline style) lets the  */
/* card grow to fit its content at all viewport widths. .hover-text uses       */
/* opacity:0, not display:none, so hidden text still participates in layout —  */
/* the card is always exactly tall enough to hold all text and the button.     */
.hover-cover.wp-block-cover {
  align-items: flex-start;
  aspect-ratio: auto !important;
  min-height: 200px;
}

/* Equal-height rows: turn the column into a flex column, stretch the group   */
/* wrapper to fill it, then let the card fill the group. All columns in a     */
/* wp-block-columns row already flex-stretch to the same height, so this      */
/* propagates that height all the way down to the card.                       */
.wp-block-column:has(.hover-cover) {
  display: flex;
  flex-direction: column;
}
.wp-block-column:has(.hover-cover) > .wp-block-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wp-block-column:has(.hover-cover) .hover-cover.wp-block-cover {
  flex: 1;
}

.hover-cover .wp-block-cover__inner-container {
  padding-top: 1.25rem;
  padding-bottom: 1rem;
}

/* Background overlay — transparent by default, darkens on hover.             */
/* !important needed to override WordPress's .has-*-background-color classes. */
.hover-cover.wp-block-cover,
.hover-cover.wp-block-cover .wp-block-cover__background {
  background-color: transparent !important;
  transition: background-color 0.4s ease;
}

.hover-cover.wp-block-cover:hover,
.hover-cover.wp-block-cover:hover .wp-block-cover__background {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Image — zooms within the card; container overflow:hidden does the clipping */
.hover-cover .wp-block-cover__image-background {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.4s ease;
}

.hover-cover:hover .wp-block-cover__image-background {
  transform: scale(1.07);
  filter: brightness(1.06);
}

/* Text and button — slide up and fade in on hover */
.hover-cover .hover-text,
.hover-cover .hover-button {
  line-height: 1.4;
  opacity: 0;
  position: relative;
  z-index: 10;
  transform: translateY(8px);
  transition: opacity 0.3s ease,
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-cover:hover .hover-text,
.hover-cover:hover .hover-button {
  opacity: 1;
  transform: translateY(0);
}

/* Button reveals slightly after text for a staggered effect */
.hover-cover:hover .hover-button {
  transition-delay: 0.06s;
}

/* Stack hover-cover columns at 1000px — overrides WP's flex-wrap:nowrap at  */
/* 782px so cards go full-width sooner.                                       */
@media (max-width: 999px) {
  .wp-block-columns:has(.hover-cover) {
    flex-wrap: wrap;
  }
  .wp-block-columns:has(.hover-cover) .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ── Animated divider ──────────────────────────────────────────────────────── */
.related-post-div {
  position: relative;
  padding-bottom: 5px;
}

.divider-animated {
  width: 100%;
  height: 3px;
  position: relative;
}

.divider-animated::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 10%;
  background-color: var(--wp--preset--color--primary);
  transition: width 0.4s ease-out;
}

.related-post-div:hover .divider-animated::after {
  width: 100%;
}

/* ── SVG line draw animations ──────────────────────────────────────────────── */
.line-horizontal,
.line-diagonal {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s ease-in-out;
}

.stylized-linework.is-visible .line-horizontal,
.stylized-linework.is-visible .line-diagonal {
  stroke-dashoffset: 0;
}

.stylized-linework.is-visible .line-diagonal {
  transition-delay: 0.6s;
}

/* ── Reduced-motion fallback ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hover-cover,
  .hover-cover .wp-block-cover__background,
  .hover-cover .wp-block-cover__image-background,
  .hover-cover .hover-text,
  .hover-cover .hover-button,
  .divider-animated::after,
  .line-horizontal,
  .line-diagonal {
    transition: none;
  }

  .hover-cover .hover-text,
  .hover-cover .hover-button {
    transform: none;
  }
}