/* ==========================================================================
   Big Ear — site-wide readability & phone fixes (bigear-assets/css/ui.css)
   Loaded on every front-end page. Each rule fixes one measured failure.
   ========================================================================== */

/* 1. ElementsKit heading highlights ("How to Wear", "Watch the History") were
      yellow text on white sections: 1.07:1. Now a highlighter mark: dark text
      on Big Ear yellow, readable on light AND dark sections (15.5:1). */
.ekit-heading .elementskit-section-title span,
.ekit-heading--title > span {
  background: #FFE600;
  color: #0B0B0A !important;
  padding: 0 .2em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 2. "Translate »" tab was white on yellow (1.26:1) and sat over page content
      on phones. Same tab, readable, and tucked to the bottom-left edge. */
#glt-translate-trigger,
#glt-translate-trigger span,
.tool-container .tool-items a,
#glt-translate-trigger .notranslate {
  color: #0B0B0A !important;
  text-shadow: none !important;
}
#glt-translate-trigger {
  background: #FFE600 !important;
  border: 1px solid #0B0B0A !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
  font-weight: 700 !important;
}
@media (max-width: 767px) {
  #glt-translate-trigger { left: 10px !important; right: auto !important; bottom: 10px !important; top: auto !important; transform: none !important; font-size: 13px !important; padding: 8px 12px !important; }
}

/* 3. Blog post grids ran 15px off the right edge of phones (negative row
      margins with no container padding), so the whole page slid sideways. */
@media (max-width: 767px) {
  .ekit-wid-con .ekit-row.post-items,
  .ekit-wid-con .ekit-row { margin-left: 0 !important; margin-right: 0 !important; }
  .ekit-wid-con .post-item { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
  /* wide images and galleries inside page content never exceed the screen */
  .elementor-widget-container img,
  .entry-content img,
  .elementor-image-gallery img { max-width: 100% !important; height: auto !important; }
}
@media (max-width: 767px) {
  /* category chips under each blog card wrap instead of running off-screen */
  .ekit-wid-con .post-cat { display: flex !important; flex-wrap: wrap !important; gap: 4px 6px; white-space: normal !important; max-width: 100% !important; }
}

/* 4. Cart: "Change address" was fully transparent text (invisible). */
body.woocommerce-cart .cart_totals .shipping-calculator-button {
  color: #0B0B0A !important;
  -webkit-text-fill-color: #0B0B0A !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  display: inline-block;
  padding: 8px 0;
}

/* 5. About Us: the animated headline's lead words were #333 on a #2B2B2B band (1.12:1).
      About Us only — the same widget sits on a white band on other pages. */
body.page-id-261 .premium-atext__headline .premium-prefix-text,
body.page-id-261 .premium-atext__headline .premium-prefix-text span,
body.page-id-261 .premium-atext__headline .premium-suffix-text,
body.page-id-261 .premium-atext__headline .premium-suffix-text span { color: #F3F1E9 !important; }

/* 6. The theme's saved link colour is rgba(51,51,51,0) — fully transparent — so every
      link without its own colour was invisible ("Lost your password?", "Contact us",
      "Download"…). Links now take the colour of the text around them, and links in
      body copy are underlined so they still read as links. */
a { color: inherit; }
.entry-content a:not([class*="button"]):not(.elementor-button),
.woocommerce-MyAccount-content a:not(.button),
.woocommerce-form-login a,
.lost_password a,
.elementor-text-editor a,
.elementor-widget-text-editor a { text-decoration: underline; text-underline-offset: 3px; }

/* 7. Home Impression Kit: the "Contact Us" button was black text on a black button. */
body.page-id-609 a.elementor-button[href*="contact"] .elementor-button-text,
body.page-id-609 a.elementor-button[href*="contact"] { color: #F3F1E9 !important; }
/* 8. Find a Provider: an inline red "click here" on grey (3.2:1) — darker red, same meaning (5.9:1). */
body.page-id-603 a[style*="#ff0000"] { color: #B00000 !important; }

/* ==========================================================================
   27 Sep late — full-site audit (67 designed pages, 13,412 text items, 6 widths)
   ========================================================================== */

/* 7. A site-wide ".pop{color:dark !important}" (meant for yellow badges) also hit the
      dark "Select" column of the comparison table: dark text on dark, unreadable. */
.ch-cell.pop,
.ch-col-h.pop { color: #F3F1E9 !important; }
.ch-col-h.pop .pin { color: #0B0B0A !important; }

/* 8. "★ MOST POPULAR" badge: a later rule forced white text onto its yellow fill (1.12:1). */
.model[style*="--blaze"] { color: #0B0B0A !important; }

/* 9. Eyebrow line on the yellow call-to-action band was faint grey (2.5:1). */
.cta .eyebrow { color: #3A3413 !important; }

/* 10. Small grey labels too dim on dark cards (3.9:1 at 10px). */
#objections .obj-rank { color: #B3AFA2 !important; }

/* 11. How-it-works step numbers not yet selected were nearly invisible (1.9:1). */
.cw-tab:not([aria-selected="true"]) .tn { color: #8E8A7E !important; }

/* 12. On 320px phones the menu button sat 8px off the screen on Shop and Categories. */
@media (max-width: 360px) {
  .nav-toggle { margin-left: 0 !important; padding: 6px !important; }
}

/* 13. Tablets (768–1100px): the blog-grid and image fixes above stopped at 767px, so
       blog category pages and the old store pages still slid sideways on iPads. */
@media (max-width: 1100px) {
  .ekit-wid-con .ekit-row.post-items,
  .ekit-wid-con .ekit-row { margin-left: 0 !important; margin-right: 0 !important; }
  .ekit-wid-con .post-item { max-width: 100% !important; }
}
.elementor-widget-container img,
.entry-content img,
.elementor-image-gallery img { max-width: 100%; height: auto; }
/* older Elementor pages: nothing may push the page wider than the screen */
body.elementor-page { overflow-x: clip; }