/* ==========================================================================
   BPP /blog/ hero: dark brown "cocoa" theme (matches the dark section on ubersuggest.com/en)
   Scope: #blog-hero only (Archive template 14230, Elementor container 14281ca, _element_id=blog-hero).
   Header 13827, footer 13937 and every section below the hero are untouched. No layout/spacing rules.
   Ubersuggest values (measured): base #250A06, glow radial-gradient(circle at 50% 55%, #40130D, transparent 44%),
   orange #FF5E29 (borders at ~86% alpha), orange-400 #FF845C, cream text #FFF8F2, soft text #FFDCD1,
   card bg rgba(29,8,5,.86).
   Specificity: every rule starts with #blog-hero so it beats Elementor's generated
   ".elementor-14230 .elementor-element.elementor-element-<id> ..." rules without !important.
   ========================================================================== */

/* 1. Background: cocoa base + warm radial glow (same recipe as Ubersuggest) */
#blog-hero.e-con{
  background-color:#250A06;
  background-image:radial-gradient(ellipse 62% 78% at 50% 58%,#40130D 0%,rgba(37,10,6,0) 100%);
  isolation:isolate;
}

/* 2. Heading + intro */
#blog-hero .elementor-widget-theme-archive-title .elementor-heading-title,
#blog-hero .elementor-widget-heading .elementor-heading-title{color:#FFFFFF}
#blog-hero .elementor-widget-text-editor,
#blog-hero .elementor-widget-text-editor p{color:#FFDCD1}

/* 3. Search field: dark translucent box, orange 1px border, light text; orange Search button kept */
#blog-hero .elementor-search-form .elementor-search-form__container{
  background-color:rgba(29,8,5,.86);
  border:1px solid rgba(255,94,41,.86);
  box-shadow:0 10px 36px -14px rgba(255,94,41,.40);
  overflow:hidden;
}
#blog-hero .elementor-search-form .elementor-search-form__container:focus-within{
  border-color:#FF845C;
  box-shadow:0 0 0 3px rgba(255,94,41,.28),0 10px 36px -14px rgba(255,94,41,.50);
}
#blog-hero .elementor-search-form input.elementor-search-form__input{
  background-color:transparent;
  color:#FFF8F2;
  caret-color:#FF845C;
  color-scheme:dark;
  border:0;
  border-radius:0;
  box-shadow:none;
}
#blog-hero .elementor-search-form input.elementor-search-form__input::placeholder{color:#D8B3A6;opacity:1}
#blog-hero .elementor-search-form input.elementor-search-form__input:focus{outline:0;box-shadow:none}
/* Search button: unchanged orange fill + dark brown text, only made explicit so it stays readable */
#blog-hero .elementor-search-form .elementor-search-form__submit{background-color:#FF5E29;color:#250A06;--e-search-form-submit-text-color:#250A06}
#blog-hero .elementor-search-form .elementor-search-form__submit:hover,
#blog-hero .elementor-search-form .elementor-search-form__submit:focus-visible{background-color:#FF845C;color:#250A06;--e-search-form-submit-text-color:#250A06}

/* 4. Category pills: dark pills, thin orange-brown border, light text */
#blog-hero .elementor-element .elementor-button{
  background-color:rgba(29,8,5,.86);
  border-color:rgba(255,94,41,.60);
  color:#FFDCD1;
  fill:#FFDCD1;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
/* hover / keyboard focus: orange outline + orange text on a faint orange tint */
#blog-hero .elementor-element .elementor-button:hover,
#blog-hero .elementor-element .elementor-button:focus-visible{
  background-color:rgba(255,94,41,.16);
  border-color:#FF5E29;
  color:#FF845C;
}
#blog-hero .elementor-element .elementor-button:focus-visible{outline:2px solid #FF845C;outline-offset:2px}
/* active pill (WordPress body class decides which one): solid orange, dark brown text */
body.blog #blog-hero .bpp-pill-all .elementor-button,
body.category-google-business-profile #blog-hero .bpp-pill-google-business-profile .elementor-button,
body.category-local-seo #blog-hero .bpp-pill-local-seo .elementor-button,
body.category-reviews #blog-hero .bpp-pill-reviews .elementor-button,
body.category-websites #blog-hero .bpp-pill-websites .elementor-button,
body.category-branding #blog-hero .bpp-pill-branding .elementor-button,
body.category-marketing-automation #blog-hero .bpp-pill-marketing-automation .elementor-button,
body.category-ads #blog-hero .bpp-pill-ads .elementor-button{
  background-color:#FF5E29;border-color:#FF5E29;color:#250A06;
}
body.blog #blog-hero .bpp-pill-all .elementor-button:hover,
body.category-google-business-profile #blog-hero .bpp-pill-google-business-profile .elementor-button:hover,
body.category-local-seo #blog-hero .bpp-pill-local-seo .elementor-button:hover,
body.category-reviews #blog-hero .bpp-pill-reviews .elementor-button:hover,
body.category-websites #blog-hero .bpp-pill-websites .elementor-button:hover,
body.category-branding #blog-hero .bpp-pill-branding .elementor-button:hover,
body.category-marketing-automation #blog-hero .bpp-pill-marketing-automation .elementor-button:hover,
body.category-ads #blog-hero .bpp-pill-ads .elementor-button:hover{
  background-color:#FF845C;border-color:#FF845C;color:#250A06;
}