/* =========================================================
   MHT SIDEBAR SEARCH — TOKENISED CONTEXT SKIN
   File: assets/css/navigation/mht-sidebar-search.css

   Purpose:
   - Styles the reusable sidebar search card only.
   - Uses MyHotips brand tokens rather than hard-coded colours.
   - Supports Money/navy and Wellness/olive contexts.
   - Used in the real blog sidebar and pseudo sidebars.
   - Does not control the sticky topbar.
   ========================================================= */

/* =========================================================
   01. DEFAULT / MONEY TOKENS
   ========================================================= */

.mht-sidebar-search{
  --mht-sidebar-search-pad: var(--space-xl);
  --mht-sidebar-search-gap: var(--space-sm);
  --mht-sidebar-search-radius: var(--radius-md);
  --mht-sidebar-search-control-radius: var(--radius-sm);
  --mht-sidebar-search-control-height: 40px;

  --mht-sidebar-search-band-a: var(--color-area-hub-money-band-a, var(--color-dark));
  --mht-sidebar-search-band-b: var(--color-area-hub-money-band-b, var(--color-dark-muted));
  --mht-sidebar-search-accent: var(--color-tech-accent, var(--color-accent));
  --mht-sidebar-search-panel-soft: var(--color-area-hub-money-panel-soft-bg, var(--color-surface-muted));
  --mht-sidebar-search-border-base: var(--color-area-hub-money-border, var(--border-color-light));

  --mht-sidebar-search-heading: var(--color-white);
  --mht-sidebar-search-text: color-mix(in srgb, var(--color-white) 78%, transparent);
  --mht-sidebar-search-kicker: var(--mht-sidebar-search-accent);

  --mht-sidebar-search-bg:
    radial-gradient(
      circle at 92% 8%,
      color-mix(in srgb, var(--mht-sidebar-search-accent) 18%, transparent) 0%,
      transparent 30%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--mht-sidebar-search-band-b) 92%, var(--color-white) 8%) 0%,
      color-mix(in srgb, var(--mht-sidebar-search-band-a) 96%, var(--color-black-soft) 4%) 100%
    );

  --mht-sidebar-search-border: color-mix(
    in srgb,
    var(--color-white) 18%,
    var(--mht-sidebar-search-border-base) 82%
  );

  --mht-sidebar-search-shadow: var(--shadow-sm);

  --mht-sidebar-search-control-bg: color-mix(in srgb, var(--color-white) 92%, transparent);
  --mht-sidebar-search-control-bg-focus: var(--color-white);
  --mht-sidebar-search-control-border: color-mix(in srgb, var(--color-white) 38%, transparent);
  --mht-sidebar-search-control-text: var(--color-dark);
  --mht-sidebar-search-control-placeholder: var(--color-dark-muted);

  --mht-sidebar-search-button-bg: color-mix(
    in srgb,
    var(--mht-sidebar-search-band-a) 82%,
    var(--color-black-soft) 18%
  );
  --mht-sidebar-search-button-bg-hover: var(--mht-sidebar-search-accent);
  --mht-sidebar-search-button-text: var(--color-white);
  --mht-sidebar-search-button-text-hover: var(--color-dark);

  position: relative;
  isolation: isolate;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  border: var(--border-width-thin) var(--border-style-standard) var(--mht-sidebar-search-border);
  border-radius: var(--mht-sidebar-search-radius);
  background: var(--mht-sidebar-search-bg);
  box-shadow: var(--mht-sidebar-search-shadow);

  backdrop-filter: blur(var(--glass-blur-sm, 12px)) saturate(118%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm, 12px)) saturate(118%);
}

.mht-sidebar-search::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 12%, transparent) 0%,
      transparent 48%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-white) 8%, transparent) 0%,
      transparent 58%
    );

  opacity: 0.86;
}

.mht-sidebar-search > *{
  position: relative;
  z-index: 1;
}

.mht-sidebar-search,
.mht-sidebar-search *,
.mht-sidebar-search *::before,
.mht-sidebar-search *::after{
  box-sizing: border-box !important;
}

/* =========================================================
   02. CONTEXT MAPPING
   - Use existing body/area/sidebar classes where available.
   - Explicit modifier classes are available as a safe fallback.
   ========================================================= */

body.hotips-site-theme--money .mht-sidebar-search,
body.my-blog-context-money .mht-sidebar-search,
body.tax-my_blog_content_area.term-money-growth .mht-sidebar-search,
body.tax-my_blog_content_area.term-email-growth .mht-sidebar-search,
body.tax-my_blog_content_area.term-funnels-automation .mht-sidebar-search,
body.tax-my_blog_content_area.term-sell-online .mht-sidebar-search,
body.tax-my_blog_content_area.term-website-growth .mht-sidebar-search,
body.tax-my_blog_content_area.term-creator-tools .mht-sidebar-search,
body.tax-my_blog_content_area.term-creator-gear .mht-sidebar-search,
.hotips-area-hub--money .mht-sidebar-search,
.hotips-section-money .mht-sidebar-search,
.mht-sidebar-search--money{
  --mht-sidebar-search-band-a: var(--color-area-hub-money-band-a, var(--color-dark));
  --mht-sidebar-search-band-b: var(--color-area-hub-money-band-b, var(--color-dark-muted));
  --mht-sidebar-search-accent: var(--color-tech-accent, var(--color-accent));
  --mht-sidebar-search-panel-soft: var(--color-area-hub-money-panel-soft-bg, var(--color-surface-muted));
  --mht-sidebar-search-border-base: var(--color-area-hub-money-border, var(--border-color-light));
}

body.hotips-site-theme--wellness .mht-sidebar-search,
body.my-blog-context-wellness .mht-sidebar-search,
body.tax-my_blog_content_area.term-wellness .mht-sidebar-search,
body.tax-my_blog_content_area.term-balanced-living .mht-sidebar-search,
body.tax-my_blog_content_area.term-healthy-home-work .mht-sidebar-search,
body.tax-my_blog_content_area.term-digital-calm .mht-sidebar-search,
body.tax-my_blog_content_area.term-gentle-productivity .mht-sidebar-search,
body.tax-my_blog_content_area.term-everyday-energy .mht-sidebar-search,
body.tax-my_blog_content_area.term-lighter-systems .mht-sidebar-search,
.hotips-area-hub--wellness .mht-sidebar-search,
.hotips-section-wellness .mht-sidebar-search,
.hotips-section-guide-sidebar--wellness .mht-sidebar-search,
.mht-sidebar-search--wellness{
  --mht-sidebar-search-band-a: var(--color-area-hub-wellness-band-a, var(--color-wellness-dark));
  --mht-sidebar-search-band-b: var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted));
  --mht-sidebar-search-accent: var(--color-wellness-accent, var(--color-accent));
  --mht-sidebar-search-panel-soft: var(--color-area-hub-wellness-panel-soft-bg, var(--color-wellness-soft));
  --mht-sidebar-search-border-base: var(--color-area-hub-wellness-border, var(--color-wellness-line));

  --mht-sidebar-search-button-bg: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 86%,
    var(--color-black-soft) 14%
  );
}

/* Inherit exact palette from the area landing shell when this card is used there. */
.mht-sidebar-search--area-hub-sidebar{
  --mht-sidebar-search-band-a: var(--area-landing-band-a, var(--color-area-hub-money-band-a, var(--color-dark)));
  --mht-sidebar-search-band-b: var(--area-landing-band-b, var(--color-area-hub-money-band-b, var(--color-dark-muted)));
  --mht-sidebar-search-accent: var(--area-landing-accent, var(--color-tech-accent, var(--color-accent)));
  --mht-sidebar-search-panel-soft: var(--area-landing-soft, var(--color-area-hub-money-panel-soft-bg, var(--color-surface-muted)));
  --mht-sidebar-search-border-base: var(--area-landing-border, var(--border-color-light));
}

/* Inherit exact palette from the section-guide pseudo-sidebar when this card is used there. */
.mht-sidebar-search--section-guide-sidebar,
.mht-sidebar-search--section-guide-hub-panel{
  --mht-sidebar-search-band-a: var(--section-guide-sidebar-dark, var(--mht-sidebar-search-band-a));
  --mht-sidebar-search-band-b: var(--section-guide-sidebar-mid, var(--mht-sidebar-search-band-b));
  --mht-sidebar-search-accent: var(--section-guide-sidebar-accent, var(--mht-sidebar-search-accent));
  --mht-sidebar-search-panel-soft: var(--section-guide-sidebar-soft, var(--mht-sidebar-search-panel-soft));
  --mht-sidebar-search-border-base: var(--section-guide-sidebar-border, var(--mht-sidebar-search-border-base));
}

/* =========================================================
   03. CARD HEADER
   ========================================================= */

.mht-sidebar-search__head{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding:
    var(--mht-sidebar-search-pad)
    var(--mht-sidebar-search-pad)
    var(--space-sm) !important;
}

.mht-sidebar-search__kicker{
  margin: 0 0 var(--space-sm);
  color: var(--mht-sidebar-search-kicker);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: var(--line-height-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mht-sidebar-search__title{
  margin: 0;
  max-width: 100%;
  color: var(--mht-sidebar-search-heading);
  font-family: var(--font-display);
  font-size: var(--font-size-xl) !important;
  font-weight: 760;
  line-height: var(--line-height-heading);
  letter-spacing: -0.025em;
}

.mht-sidebar-search__text{
  margin: var(--space-sm) 0 0;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  color: var(--mht-sidebar-search-text);
  font-family: var(--font-body);
  font-size: var(--font-size-ui) !important;
  font-weight: 650;
  line-height: var(--line-height-ui) !important;
}

.mht-sidebar-search__form{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding:
    0
    var(--mht-sidebar-search-pad)
    var(--mht-sidebar-search-pad) !important;
}

/* =========================================================
   04. CONTAIN SHORTCODE FORM IN SIDEBAR MODE
   Exact markup comes from inc/mht-site-search.php:
   form.mht-site-search > .mht-site-search__inner
   ========================================================= */

.mht-sidebar-search form.mht-site-search,
.mht-sidebar-search .mht-site-search{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mht-sidebar-search .mht-site-search__inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--mht-sidebar-search-gap) !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.mht-sidebar-search .mht-site-search__field,
.mht-sidebar-search .mht-site-search__select,
.mht-sidebar-search .mht-site-search__submit{
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.mht-sidebar-search input[type="search"],
.mht-sidebar-search select,
.mht-sidebar-search button[type="submit"],
.mht-sidebar-search input[type="submit"]{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Hide accidental second dropdowns in sidebar cards.
   PHP should still pass show_type => 0 where possible. */
.mht-sidebar-search .mht-site-search__select:nth-of-type(n+2),
.mht-sidebar-search select:nth-of-type(n+2){
  display: none !important;
}

/* =========================================================
   05. FIELDS
   ========================================================= */

.mht-sidebar-search .mht-site-search__field,
.mht-sidebar-search .mht-site-search__select,
.mht-sidebar-search input[type="search"],
.mht-sidebar-search select{
  height: var(--mht-sidebar-search-control-height) !important;
  min-height: var(--mht-sidebar-search-control-height) !important;
  padding: 0 var(--space-md) !important;

  border-radius: var(--mht-sidebar-search-control-radius) !important;
  border: var(--border-width-thin) var(--border-style-standard) var(--mht-sidebar-search-control-border) !important;

  background: var(--mht-sidebar-search-control-bg) !important;
  color: var(--mht-sidebar-search-control-text) !important;

  font-family: var(--font-body) !important;
  font-size: var(--font-size-ui) !important;
  font-weight: 750 !important;
  line-height: 1 !important;

  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 78%, transparent) !important;
}

.mht-sidebar-search .mht-site-search__field::placeholder,
.mht-sidebar-search input[type="search"]::placeholder{
  color: var(--mht-sidebar-search-control-placeholder) !important;
  opacity: 0.82 !important;
}

.mht-sidebar-search .mht-site-search__field:focus,
.mht-sidebar-search .mht-site-search__select:focus,
.mht-sidebar-search input[type="search"]:focus,
.mht-sidebar-search select:focus{
  border-color: color-mix(in srgb, var(--mht-sidebar-search-accent) 58%, var(--mht-sidebar-search-control-border) 42%) !important;
  background: var(--mht-sidebar-search-control-bg-focus) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mht-sidebar-search-accent) 20%, transparent) !important;
  outline: none !important;
}

.mht-sidebar-search select option{
  color: var(--color-dark);
  background: var(--color-white);
}

/* =========================================================
   06. SUBMIT BUTTON
   ========================================================= */

.mht-sidebar-search .mht-site-search__submit,
.mht-sidebar-search button[type="submit"],
.mht-sidebar-search input[type="submit"]{
  height: var(--mht-sidebar-search-control-height) !important;
  min-height: var(--mht-sidebar-search-control-height) !important;
  padding: 0 var(--space-md) !important;

  border: 0 !important;
  border-radius: var(--mht-sidebar-search-control-radius) !important;

  background: var(--mht-sidebar-search-button-bg) !important;
  color: var(--mht-sidebar-search-button-text) !important;

  font-family: var(--font-body) !important;
  font-size: var(--font-size-ui) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: var(--letter-spacing-ui, 0.025em) !important;

  cursor: pointer !important;

  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard) !important;
}

.mht-sidebar-search .mht-site-search__submit:hover,
.mht-sidebar-search .mht-site-search__submit:focus-visible,
.mht-sidebar-search button[type="submit"]:hover,
.mht-sidebar-search button[type="submit"]:focus-visible,
.mht-sidebar-search input[type="submit"]:hover,
.mht-sidebar-search input[type="submit"]:focus-visible{
  background: var(--mht-sidebar-search-button-bg-hover) !important;
  color: var(--mht-sidebar-search-button-text-hover) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mht-sidebar-search-accent) 20%, transparent) !important;
  transform: translateY(var(--motion-lift-xs, -1px)) !important;
  outline: none !important;
}

/* =========================================================
   07. COMPACT / SMALL SIDEBAR SAFETY
   ========================================================= */

@media (max-width: 1080px){
  .mht-sidebar-search{
    --mht-sidebar-search-pad: var(--space-lg);
  }
}

@media (max-width: 720px){
  .mht-sidebar-search{
    --mht-sidebar-search-control-height: 42px;
  }
}

/* =========================================================
   BLOG SIDEBAR SEARCH GAP
   - Adds breathing room between search card and next sidebar module
   - Keeps pseudo/sidebar search styling intact
   ========================================================= */

body.single-my_blog_item .mht-sidebar-search,
body.single-post .mht-sidebar-search,
.hotips-blog-sidebar .mht-sidebar-search,
.hotips-sidebar--blog .mht-sidebar-search,
.sidebar-blog .mht-sidebar-search{
  margin-bottom: var(--space-md, 10px) !important;
}