/* WCAG 2.2 AA adjustments layered on the Bloom theme (loaded after bloom.css and compat.css).
 * The variables are set per store in the layout from App\Domain\Branding\ColorContrast, so a pale or mid-tone brand colour
 * never produces unreadable prices, links or buttons. A brand colour that already passes is passed through unchanged. */

/* Brand colour used as TEXT (prices, links, eyebrows) must read at 4.5:1 on the page and card backgrounds. */
.bloom .text-primary, .bloom-link, .bloom-price-now, .bloom-hero-eyebrow, .sf-compat .product-price,
.bloom-card-title:hover, .btn-bloom-ghost:hover {
    color: var(--sf-primary-strong, var(--bs-primary)) !important;
}
.bloom .text-secondary { color: var(--sf-secondary-strong, var(--bs-secondary)) !important; }
.btn-bloom-ghost:hover { border-color: var(--sf-primary-strong, var(--bs-primary)); }

/* Outlined buttons ("Add to cart" on cards): brand text must read on white; filled on hover/focus with readable text. */
.bloom .btn-outline-primary { color: var(--sf-primary-strong, var(--bs-primary)); border-color: var(--sf-primary-strong, var(--bs-primary)); }
.bloom .btn-outline-primary:hover, .bloom .btn-outline-primary:focus-visible { background-color: var(--bs-primary); border-color: var(--bs-primary); color: var(--sf-on-primary); }
/* Bootstrap's muted grey is 4.45:1 on Bloom's cream background; this is 5.6:1. */
.bloom .text-muted, .bloom .muted, .bloom th { color: #5c636a !important; }

/* 1.4.1: the "View all" style links are underlined, not distinguished by colour alone. */
.bloom-link { text-decoration: underline; text-underline-offset: 3px; }

/* The footer headings are real <h2>s now (they were h5/h6, which broke the heading order). Same look as before. */
.bloom-footer h2 { color: #fff !important; font-family: "Baloo 2", sans-serif; }

/* 2.4.7 / 1.4.11: a clearly visible keyboard focus ring, white on the dark areas. */
.bloom :focus-visible { outline: 3px solid var(--sf-primary-strong, var(--bs-primary)); outline-offset: 2px; }
.bloom-footer :focus-visible, .bloom-topbar :focus-visible, .sf-cookie :focus-visible { outline-color: #fff; }

/* compat.css fills every button inside page content with the brand colour, so an "outline" button there is a filled one:
   its text is the readable-on-brand colour, not the brand-as-text colour set above. */
.bloom .sf-compat .btn-outline-primary, .bloom .sf-compat .btn-outline-primary:hover, .bloom .sf-compat .btn-outline-primary:focus-visible { color: var(--sf-on-primary); }
/* Active / hovered menu item: brand-coloured text on a pale brand-coloured highlight. */
.bloom-nav .nav-link:hover, .bloom-nav .nav-link.active { color: var(--sf-primary-on-tint, var(--bs-primary)) !important; }
/* 2.5.8: the carousel position dots are at least 24px tall to tap (the visible bar stays 3px). */
.carousel-indicators [data-bs-target] { border-top-width: 11px; border-bottom-width: 11px; }

/* 1.4.10 reflow: the footer's wide gutter (g-5) pushed it 12px past the screen edge on a 320px phone. */
@media (max-width: 575.98px) {
    .bloom-footer .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Top bar (phone / email on the secondary colour): the theme fades the links to 95% opacity, which takes dark-on-teal from
   4.6:1 to 4.35:1. Full opacity keeps it at 4.5+ (the colour itself is chosen by ColorContrast). */
.bloom-topbar a { opacity: 1; }
/* The "10% OFF" badge: Bootstrap's red takes WHITE text (4.5:1); the theme's brand-text colour on it is only 3.4:1. */
.bloom .badge.bg-danger, .bloom .bg-danger { color: #fff !important; }
/* Plain links in page text (e.g. on the 404 page) were Bootstrap blue on Bloom's cream (4.27:1). */
.bloom main a:not([class]) { color: var(--sf-primary-strong, var(--bs-primary)); text-decoration: underline; text-underline-offset: 2px; }

/* Narrow phones (320px, two cards per row): the price and the struck-through old price no longer fit side by side and the
   old price ran past the card edge. Letting the row wrap puts it on the line below instead. */
.bloom-price { flex-wrap: wrap; column-gap: .5rem; row-gap: 0; }

/* Category tiles: a long unbroken word ("Maharashtrian") pushed the arrow circle out of its tile on a phone. */
.bloom-tile { height: 100%; }
.bloom-tile-name { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 575.98px) {
    .bloom-tile { padding: .9rem; gap: .5rem; font-size: 1rem; }
}