/*
Theme Name: Smarty Child
Template: smarty
*/
:root {
  --link-color: #5d88fc;
  --link-hover-color: #2e437e;

  --space-row: 64px;    /* row padding, top and bottom */
  --space-group: 32px;  /* between stacked groups: Inner Rows, stacked columns */
  --space-title: 32px;  /* below a section title's separator, to the content */

  @media (max-width: 767px) {
    --space-row: 40px;
  }
}

:not(html)[lang|="es"] {
  font-style: italic;
}
@media (max-width: 991px) {
  .header-holder { position: relative; }
  .header, .top-bar { display: none; }
  .top-bar-mobile, .header-mobile { display: block; }
  .stm-nav__menu > li { padding: 0; }

  .header-mobile { background: linear-gradient(180deg, #011b3a 0%, #0b2a52 100%); }
  .header-mobile .logo img { max-width: 150px; }
  .header-mobile .header-mobile__control-line,
  .header-mobile .header-mobile__control-line::before,
  .header-mobile .header-mobile__control-line::after { background: #fff; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .header_view-style_3 .stm-nav__menu_type_header { margin-right: -12px; }
  .header_view-style_3 .stm-nav__menu_type_header > .menu-item {
    margin: 0 12px;
    font-size: 15px;
  }
  .header .logo { max-width: 20%; }
}

/* Wrap the menu rather than dropping the logo */
@media (min-width: 992px) {
  .header_view-style_3 .header__content {
    display: flex;
    align-items: center;
    min-height: 100px;
  }
  .header_view-style_3 .header__content::after { display: none; }   /* old float clearfix */

  .header_view-style_3 .header__content .logo {
    order: -1;               /* logo comes after the menu in the HTML */
    flex: 0 0 auto;
    float: none;
    height: auto;
    line-height: 1;
    max-width: 220px;
    margin-right: auto;
    padding: 15px 30px 15px 0;
  }
  .header_view-style_3 .stm-nav_type_header {
    float: none;
    flex: 1 1 auto;
  }
  .header_view-style_3 .stm-nav__menu_type_header {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .header_view-style_3 .stm-nav__menu_type_header > .menu-item > a {
    height: auto;
    line-height: 1.3;
    padding: 12px 0;
  }
}

/* Fix admin bar on small screens */
@media screen and (max-width: 600px) {
  body.admin-bar #wpadminbar { top: -46px; }
}

/* Move search bar into hamburger menu on mobile */
.stm-nav__menu_type_mobile-header .menu-item-search { padding: 12px 15px; background: #fff; }
.menu-item-search .stm-search-form { display: flex; }
.menu-item-search .stm-search-form__field {
  flex: 1; height: 44px; padding: 0 12px; border: 1px solid #e6e6e6; border-right: 0;
}
.menu-item-search .stm-search-form__submit {
  width: 44px; border: 0; background: #2e437e; color: #fff;
}
.menu-item-search .stm-search-form__submit-text { display: none; }

/* Remove the separate white search bar; hide the whole bar only if search was its only item */
.top-bar-mobile__search { display: none; }
.top-bar-mobile:has(> .top-bar-mobile__search:only-child) { display: none; }

/* Fix clipped headings */
.post_view_single .entry-title { margin-top: 0; }

/* Fix Header image on events */
.single-stm_event .stm-page-head,
.post-type-archive-stm_event .stm-page-head {
  background-image: url('/wp-content/uploads/2026/04/ECA-Website-2026-94.jpg');
  background-size: cover;
  background-position: center;
}

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Links in running text */
:where(p, li, td, dd, blockquote, figcaption) a:not(
    [class*="btn"],
    .no-link-style,
    .header-holder a, footer a, nav a,
    .menu a, .sub-menu a,
    .vc_tta-tabs-list a,
    .page-numbers,
    .hero-fade a
) {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:where(p, li, td, dd, blockquote, figcaption) a:not(
    [class*="btn"], .no-link-style,
    .header-holder a, footer a, nav a, .menu a, .sub-menu a,
    .vc_tta-tabs-list a, .page-numbers, .hero-fade a
):hover {
  color: var(--link-hover-color);
}

/* Footer: readable text, links that look clickable */
.widget_footer,
.widget_footer .list_contact-details .list__item {
  color: #4a4a4a;
}

/* Quick Links / Get Involved: line up with the widget heading */
.widget_footer.widget_nav_menu .menu {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}
.widget_footer.widget_nav_menu .menu > li {
  padding-left: 0;
  margin-left: 0;
}

/* A faint line where the page content ends and the footer begins */
#colophon {
  margin-top: 0;
  padding-top: 146px; /* the theme's 46px + the 100px that was margin */
  border-top: 1px solid rgba(0, 0, 0, .1);
}

/* Footer links: faint underline in the text's own gray, solid on hover */
.widget_footer.widget_nav_menu .menu > li > a,
.widget_footer .list_contact-details .list__item a {
  padding-left: 0;
  color: #4a4a4a;
  text-decoration: underline;
  text-decoration-color: rgba(74, 74, 74, .35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.widget_footer.widget_nav_menu .menu > li > a:hover,
.widget_footer.widget_nav_menu .menu > li > a:focus-visible,
.widget_footer .list_contact-details .list__item a:hover,
.widget_footer .list_contact-details .list__item a:focus-visible {
  color: #011b3a;
  text-decoration-color: currentColor;
}

/* Fix custom menus, e.g. at /about */
.stm_wp_custom-menu .menu {
    padding: 25px 0;
    border-top: 4px solid #f6b02d;
}

.stm_wp_custom-menu .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.stm_wp_custom-menu .menu-item > a {
  text-transform: none;
}

.stm_wp_custom-menu .menu-item:last-child > a { border-bottom: 0; }

.stm_wp_custom-menu .menu-item > a::after {
  content: "›";
  font-size: 1.3em;
  line-height: 1;
  opacity: .6;
  transition: transform .15s, opacity .15s;
}

.stm_wp_custom-menu .menu-item > a:hover::after { transform: translateX(3px); opacity: 1; }

.stm_wp_custom-menu .current-menu-item > a { box-shadow: inset 4px 0 0 #f6b02d; }

.stm_wp_custom-menu .menu-item > a::before { display: none; }

.stm_wp_custom-menu .menu { padding-top: 0; padding-bottom: 0; }
.stm_wp_custom-menu .menu-item > a {
  padding: 12px 20px;
  line-height: 1.35;
}

/* Header menu: visible keyboard focus */
.header .stm-nav__menu_type_header > .menu-item > a:focus-visible {
  outline: 2px solid #f6b02d !important;
  outline-offset: 4px !important;
  border-radius: 2px;
}

/* Header dropdowns: same style as the sidebar menu */
.header .stm-nav__menu_type_header > .menu-item .sub-menu {
  min-width: 10em; padding-top: 0; padding-bottom: 0;
}
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .menu-item {
  display: block;
  width: 100%;
}
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75em;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px;
  line-height: 1.35;
  text-transform: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .menu-item:last-child > a { border-bottom: 0; }
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .menu-item > a::before { display: none; }
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .menu-item > a::after {
  content: "›"; font-size: 1.3em; line-height: 1; opacity: .6; transition: transform .15s, opacity .15s;
}
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .menu-item > a:hover::after { transform: translateX(3px); opacity: 1; }
.header .stm-nav__menu_type_header > .menu-item .sub-menu > .current-menu-item > a { box-shadow: inset 4px 0 0 #f6b02d; }

/* Remove the "close" X from notices by adding a no-close class */
.no-close a.vc_message_hide { display: none;}

/* Equal-width, equal-height WPBakery tabs */
.vc_tta.vc_tta-tabs .vc_tta-tabs-container .vc_tta-tabs-list {
  display: flex !important;
  width: 100%;
}
.vc_tta.vc_tta-tabs .vc_tta-tabs-container .vc_tta-tabs-list > .vc_tta-tab {
  display: flex !important;
  flex: 1 1 0;          /* grow equally; the 0 basis ignores label length */
  min-width: 0;         /* lets long labels wrap instead of widening the tab */
  float: none !important;
  width: auto !important;
}
.vc_tta.vc_tta-tabs .vc_tta-tabs-container .vc_tta-tabs-list > .vc_tta-tab > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

/* Keep accordion tab contents white while they collapse */
.vc_tta.vc_tta-accordion_style_outline.vc_tta-accordion_color_blue .vc_tta-panel .vc_tta-panel-body {
  background: #fff;
}

/* ===== style.css ===== */
 
/* 404 page */
.eca-404 {
  padding: 56px 0 80px;
  background: #fff;
}
.eca-404__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.eca-404__search {
  max-width: 420px;
  margin: 32px auto;
}
.eca-404__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}
/* 404 header with no image: light background, navy title */
.eca-404__head:not([style]) {
  background-color: rgb(238, 238, 238);
}
.eca-404__head:not([style]) .stm-page-head__title {
  color: #2e437e;
}
.eca-404__head:not([style]) .stm-page-head__overlay {
  display: none;
} 
/* The parent theme styles the footer for its full-screen 404 image.
 *    Put the normal footer back on our 404 page. */
.error404 .footer,
.error404 .footer_type_default {
  position: static;
  background: #eeeeee;
  color: #4a4a4a;
}

/* ===== White content area for pages not built with WPBakery rows =====
 *    (posts, archives, search). Pages with rows use the alternation above. */
body:is(:not(.home, .archive, .blog, .search, :has(.wpb-content-wrapper)), .single-stm_event) .content:has(.container > .main) {
  background-color: #fff;
  border-image: linear-gradient(#fff 0 0) fill 0 / / 0 100vmax;
}

/* ===== Row spacing & backgrounds (WPBakery pages) =====
   Automatic (not on the home page): 64px padding top and bottom on every row
   (40px on phones); white backgrounds on every other row, starting with the
   first. Rows inside a Section count within that Section.
   Classes (Row → Extra class name), which also work on the home page:
     flush-top / flush-bottom   no automatic top / bottom padding
     continues-above            this row continues the row above it: no space
                                between them, same background and text colour
                                (automatic, row-white, row-plain or row-blue),
                                not counted in the alternation
     row-white                  always white
     row-plain                  never white (stays page gray)
     row-blue                   navy background, white text
   Rows with their own Design Options background (vc_row-has-fill) are left
   alone. A stretched row has a helper div (.vc_row-full-width) after it,
   hence the "+ .vc_row-full-width + .continues-above" forms.
   Needs browsers from late 2023 on (nesting, :has(), nth-child(of S)). */

:is(.wpb-content-wrapper, .wpb-content-wrapper > .vc_section) > .vc_row {

  /* --- Automatic spacing --- */
  body:not(.home) &:not(.vc_row-has-fill, .row-blue, .flush-top, .continues-above) {
    padding-top: 64px;

    @media (max-width: 767px) {
      padding-top: 40px;
    }
  }
  body:not(.home) &:not(.vc_row-has-fill, .row-blue, .flush-bottom, :has(+ .continues-above, + .vc_row-full-width + .continues-above)) {
    padding-bottom: 64px;

    @media (max-width: 767px) {
      padding-bottom: 40px;
    }
  }

  /* The row above a continuing row: no space between them */
  &:has(+ .continues-above, + .vc_row-full-width + .continues-above) {
    padding-bottom: 0;
  }

  /* A continuing row starts the same distance below the row above as content
     below a section title in the same row */
  &.continues-above {
    padding-top: var(--space-title);
  }

  /* --- White: automatic alternation, or row-white ---
     Odd rows are white; if any row in the same page or Section has
     starts-gray, even rows are white instead */
  body:not(.home) :not(:has(> .starts-gray)) > &:nth-child(odd of .vc_row:not(.continues-above)):not(.vc_row-has-fill, .row-blue, .row-plain),
  body:not(.home) :has(> .starts-gray) > &:nth-child(even of .vc_row:not(.continues-above)):not(.vc_row-has-fill, .row-blue, .row-plain),
  &.row-white {
    &,
    & + .continues-above,
    & + .vc_row-full-width + .continues-above {
      background-color: #fff;
      /* border-image paints edge to edge without clipping content (negative
         margins stay visible) and adds no horizontal scrollbar */
      border-image: linear-gradient(#fff 0 0) fill 0 / / 0 100vmax;
    }
  }

  /* --- Blue --- */
  &.row-blue {
    &:not(.flush-top, .continues-above) {
      padding-top: 64px;

      @media (max-width: 767px) {
        padding-top: 40px;
      }
    }

    &,
    & + .continues-above,
    & + .vc_row-full-width + .continues-above {
      background-color: #2e437e;
      border-image: linear-gradient(#2e437e 0 0) fill 0 / / 0 100vmax;
      color: #fff;

      &:not(.flush-bottom, :has(+ .continues-above, + .vc_row-full-width + .continues-above)) {
        padding-bottom: 64px;

        @media (max-width: 767px) {
          padding-bottom: 40px;
        }
      }

      /* White text, except inside tabs and accordions (white panels) */
      :is(h1, h2, h3, h4, h5, h6, p, li, td, th, blockquote, figcaption, span, strong, em, a:not(.stm-btn)):not(.vc_tta *) {
        color: #fff !important;
      }
      a:not(.stm-btn):not(.vc_tta *) {
        text-decoration-color: rgba(255, 255, 255, .6);
      }
      a:not(.vc_tta *):focus-visible {
        outline-color: #fff;
      }
    }
  }
}

/* Pages whose content isn't built with WPBakery (Event Espresso system pages,
 *    plain editor pages): same space above and below as WPBakery pages */
.content_type_vc .entry-content:not(:has(> .wpb-content-wrapper)) {
  padding-top: 64px;
  padding-bottom: 64px;
}
@media (max-width: 767px) {
  .content_type_vc .entry-content:not(:has(> .wpb-content-wrapper)) {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ===== Spacing inside rows =====
   The row padding is the only space at a row's top and bottom edges.
   Space between groups comes from containers, not from headings or images,
   so side-by-side columns stay level. */
.wpb-content-wrapper {
  /* No column top padding. WPBakery adds 35px to the columns of a row that
     follows a row with a Design Options background; the extra classes here
     outweigh its ".vc_row-has-fill + .vc_row-full-width + .vc_row > ..." rule. */
  .vc_row.wpb_row.vc_row-fluid > .vc_column_container.wpb_column > .vc_column-inner {
    padding-top: 0;
  }

  /* A column's last element (and the last paragraph or list inside a text
     block) brings no bottom margin */
  .wpb_wrapper > :last-child {
    margin-bottom: 0;
  }

  /* The STM Title separator's own bottom margin varies per title (an element
     setting written inline), so zero it; --space-title is the whole gap.
     !important is needed only because the theme writes it as an inline style. */
  .stm-separator_type_title {
    margin-bottom: 0 !important;
  }

  /* Section title (STM Title + separator) -> what follows: --space-title here,
     plus the separator's own inline 16px */
  .stm-separator_type_title + * {
    margin-top: var(--space-title);
  }

  /* An Inner Row followed by anything (another Inner Row, a text block, ...)
     gets --space-group after it */
  .wpb_wrapper > .vc_row.vc_inner:not(:last-child) {
    margin-bottom: var(--space-group);
  }

  /* Stacked columns. Rows set to "Equal height" are flex rows: row-gap only
     appears between columns that have wrapped onto a new line, so it works
     at whatever width they stack. */
  .vc_row.vc_row-flex {
    row-gap: var(--space-group);
  }

  /* Other rows stack on phones */
  @media (max-width: 767px) {
    .vc_row:not(.vc_row-flex) > .vc_column_container + .vc_column_container {
      margin-top: var(--space-group);
    }
  }

  /* A heading that follows other text gets space above it; a heading that
     starts a block stays flush, so it lines up with an image beside it */
  .wpb_text_column .wpb_wrapper > * + :is(h2, h3, h4) {
    margin-top: 1.5em;
  }
}

/* ===== Content area spacing =====
   Pages without WPBakery rows (posts, archives, search) and the event
   header get the same space as a row: --space-row (64px, 40px on
   phones) instead of the theme's 80px top / 100px bottom. Events with
   rows get no bottom padding here, since their last row has its own. */
html body:not(.home):not(:has(.wpb-content-wrapper)) .content,
html body.single-stm_event .content {
  padding-top: var(--space-row);
  padding-bottom: var(--space-row);
}
html body.single-stm_event:has(.wpb-content-wrapper) .content {
  padding-bottom: 0;
}

/* ===== Single events =====
 *    Date box: a light gray panel instead of the theme's gold frame. The
 *    first row sits --space-title (32px) below it, not a row's 64px:
 *    :not(.home) and the doubled .vc_row outweigh the row block's
 *    padding rule. */
html body .event-info.event-info_table {
  background-color: #eee;
  border: 0;
  border-top: 3px solid var(--color-gold, #f6b02d);
  margin-bottom: 0;
}
html body.single-stm_event:not(.home) .wpb-content-wrapper > .vc_row.vc_row:first-child {
  padding-top: var(--space-title);
}

/* ===== Tabs ===== */
/* .vc_general outweighs the theme's "body .vc_tta-tabs_style-1.vc_tta-tabs.vc_general …" */
html body .vc_tta.vc_tta-tabs.vc_general {
  /* Thin navy outline like the accordions (tab layout only; on phones the
     tabs become an accordion). Drawn inside the edges so the tab and the
     box share the same pixel column. */
  @media (min-width: 768px) {
    .vc_tta-panel-body {
      box-shadow: inset 0 0 0 1px #2e437e;
      transition: none;
    }
    /* The active tab joins the box: navy sides below the gold bar; its white
       bottom covers the box's top line where they meet */
    .vc_tta-tab.vc_active > a {
      box-shadow: inset 1px 0 0 #2e437e, inset -1px 0 0 #2e437e;
      position: relative;
      z-index: 1;
      margin-bottom: -1px;
    }
  }
  /* Inactive tabs: navy; hover and keyboard focus: gold with navy text */
  .vc_tta-tab:not(.vc_active) > a {
    background-color: #2e437e;
    color: #fff;

    &:is(:hover, :focus-visible) {
      background-color: #f6b02d;
      color: #2e437e;
    }
  }
  /* The active tab doesn't change on hover */
  .vc_tta-tab.vc_active > a:hover {
    background-color: #fff;
  }

  /* Panel content: even spacing on every tab group, no Design Options needed */
  .vc_tta-panel-body {
    padding: 24px 16px;

    > :first-child, .wpb_wrapper > :first-child { margin-top: 0; }
    > :last-child, .wpb_wrapper > :last-child { margin-bottom: 0; }
  }
}

/* Give Event Espresso's "attention" notices (for admin) a quieter look */
.ee-attention {
  background: #f4f6fb;
  border: 0;
  border-left: 4px solid #2e437e;
  padding: 16px 20px;
}

/* ===== Cards: (STM) Icon Box style 4 and (STM) Text Box =====
   In a row set to "Equal height", a column holding just one of these boxes
   lets it fill the column, so boxes side by side match in height; icon
   boxes keep their button at the bottom so the buttons line up. On phones,
   an icon box with the icon on top moves it to the left of the text. */
.vc_row-o-equal-height > .vc_column_container > .vc_column-inner
  > .wpb_wrapper:has(> :is(.stm-icon-box_style-4, .stm-text-box):only-child) {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  > * {
    flex-grow: 1;
  }
}

.stm-icon-box_style-4.stm-icon-box_ic-pos_top {
  display: flex;
  flex-direction: column;

  .stm-icon-box__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start; /* buttons keep their own width */

    > .stm-btn {
      margin-top: auto;
    }
  }

  @media (max-width: 767px) {
    flex-direction: row;
    gap: 24px;

    .stm-icon-box__ic-container {
      flex: 0 0 64px;
      margin: 0;

      img {
        width: 100%;
        height: auto;
      }
    }
  }
}

/* The theme lifts the icon on hover with a negative margin, which changes
   the box's height (and, with equal-height cards, every box's). Same lift
   with transform, which doesn't affect layout. !important is only there to
   cancel the theme's own !important. */
html body .stm-icon-box_style-4 .stm-icon-box__ic-container {
  transition: transform .2s ease;
}
html body .stm-icon-box_style-4:hover .stm-icon-box__ic-container {
  margin-top: 0 !important;

  @media (prefers-reduced-motion: no-preference) {
    transform: translateY(-10px);
  }
}

/* ===== Post lists (archives): whole post is a link =====
   White cards on the page gray. The title link is stretched over the
   post with an invisible ::after, so clicking anywhere opens it; the
   other links sit above it. Hover, or keyboard focus on the title: the
   card turns the main blue (like the blue rows) with white text and a
   gold bar under the title, like the menu's. Replaces the theme's hover
   fill (green; the vendor's gold), which kept its white text. */
html body .post_view_list {
  position: relative;

  .entry-title a::after {
    all: unset;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .entry-details a:not(.entry-title a) {
    position: relative;
    z-index: 2;
  }

  .entry-details {
    transition: background-color .2s;
  }

  /* Date and comments: the theme's light gray (about 2.8:1 on white)
     fails the 4.5:1 minimum; this gray is about 7:1 */
  .entry-meta :is(li, a, i) {
    color: #555;
  }

  .entry-title a {
    text-decoration: underline 3px transparent;
    text-underline-offset: 8px;
    transition: text-decoration-color .2s;
  }

  &:is(:hover, :has(.entry-title a:focus-visible)) .entry-details {
    background-color: var(--color-navy, #2e437e);

    :is(.entry-title, .entry-title a, .entry-summary, .entry-summary p, .entry-meta li, .entry-meta a, .entry-meta i) {
      color: #fff;
    }
    .entry-meta a {
      text-decoration-color: rgba(255, 255, 255, .6);
    }
    .entry-title a {
      text-decoration-color: var(--color-gold, #f6b02d);
    }
    a:focus-visible {
      outline-color: #fff;
    }
  }
}

/* ===== Header submenus =====
   See-through like the main menu: the header's navy (#011b3a) at 60%,
   with the background blurred so lines in the photo don't show through.
   Hover and keyboard focus: solid gold with navy text, as the tabs do. */
html body #masthead .stm-nav__menu_type_header > .menu-item .sub-menu {
  background-color: rgba(1, 27, 58, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  .menu-item:is(:hover, :focus-within) > a {
    background-color: var(--color-gold, #f6b02d);
    color: #011b3a;
  }
}

/* Mobile submenus: same navy; the vendor's gold top edge stays */
html body .stm-nav__menu_type_mobile-header > li ul {
  background-color: #011b3a;
}