/* Yovich site custom additions — 2026-09-09
   Consolidates all inline <style> blocks previously injected into CMS templates.
   Load order: after /css/main.css and /css/media.css so rules here can override.
   Sections are prefixed to make them easy to grep for. */


/* ============================================================
   yv-menu-search  —  header search input styling
   Templates: was inline in Header - Yovich (30) & Header New - Yovich (63)
   ============================================================ */

.menu-search {
  display: flex !important;
  align-items: center;
  align-self: center !important;
  margin-left: 20px;
  padding: 0 !important;
}
/* Kill the site's nav-hover underline (header ul li::after) on the search li */
.menu-search::after,
.menu-search-desktop::after,
.menu-search:hover::after,
.menu-search-desktop:hover::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  background: transparent !important;
}
.menu-search-desktop { padding: 18px 20px !important; }
.menu-search-desktop form { align-self: center; }
.menu-search form {
  position: relative;
  display: flex; align-items: center;
  width: 100%;
  margin: 0;
}
.menu-search input[type="search"] {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
  font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 0 44px 0 22px !important;
  margin: 0 !important;
  border-radius: 55px !important;
  width: 210px !important;
  height: 42px !important;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  line-height: 42px !important;
  vertical-align: middle;
}
.menu-search input[type="search"]::placeholder {
  color: rgba(255,255,255,0.7);
  opacity: 1;
  font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
}
.menu-search input[type="search"]::-webkit-input-placeholder {
  font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
}
.menu-search input[type="search"]:focus {
  border-color: #EBB836 !important;
  background: rgba(255,255,255,0.14) !important;
}
.menu-search button {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 42px !important;
  width: 38px !important;
  background: transparent !important;
  border: none !important;
  color: #EBB836 !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0 !important;
  transform: none !important;
}
.menu-search button svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke-width: 2.4;
}
.menu-search button:hover { color: #fff !important; }
.menu-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (max-width: 1100px) {
  .menu-search input[type="search"] { width: 170px !important; }
}
/* Mobile hamburger nav — search appears full-width */
@media (max-width: 900px) {
  .menu-search { margin: 20px 0 10px; width: 100%; }
  .menu-search form { width: 100%; max-width: 320px; }
  .menu-search input[type="search"] {
    width: 100% !important;
    font-size: 17px !important;
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 48px 0 22px !important;
  }
  .menu-search button { width: 44px !important; height: 48px !important; }
  .menu-search button svg { width: 18px; height: 18px; }
}


/* ============================================================
   yv-equal-card-heights  —  article cards match tallest in row
   Templates: was inline in Header - Yovich (30) & Header New - Yovich (63)
   ============================================================ */

.articles-category-landing { align-items: stretch !important; }
.article-item { height: 100%; }


/* ============================================================
   yv-tm-style  —  smaller trademark superscript
   Templates: was inline in Kiwisaver - Yovich (51) & Tools - Yovich (56)
   Load sitewide so any page can use <sup class="yv-tm">™</sup>
   ============================================================ */

.yv-tm {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  font-weight: normal;
  margin-left: 1px;
  letter-spacing: 0;
}


/* ============================================================
   yv-calculators-mobile  —  /calculators padding + tap-friendly cards
   Template: was inline in Tools - Yovich (56)
   Scoped to body.kiwisaver.services (shared with services pages, safe)
   ============================================================ */

@media (max-width: 900px) {
  body.kiwisaver.services .new-intro > .wrapper.grid,
  body.kiwisaver.services .content.padding > .wrapper,
  body.kiwisaver.services .content.padding > .wrapper.grid {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
  }
  body.kiwisaver.services .content.padding.cream-bg .steps-grid { grid-gap: 20px; margin-top: 20px; }
  body.kiwisaver.services .content.padding.cream-bg .next-step {
    padding: 24px 22px 140px;
    border-radius: 16px;
    box-sizing: border-box;
  }
  body.kiwisaver.services .content.padding.cream-bg .next-step .button-row { bottom: 24px; left: 22px; right: 22px; }
  body.kiwisaver.services .content.padding.cream-bg .next-step .button { bottom: 24px; }
  body.kiwisaver.services .content.padding.cream-bg .next-step article h3 { font-size: 22px; line-height: 1.3; }
  body.kiwisaver.services .content.padding.cream-bg .next-step article p { font-size: 16px; line-height: 1.5; }
  body.kiwisaver.services .kiwisaver-banner article { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
}