/*
 * The announcement bar as a single button.
 *
 * The CMS block wraps its whole sentence in one link; this makes that link fill the bar, so the
 * entire strip is the hit area and the whole thing reverses out on hover rather than just the few
 * underlined words.
 *
 * Hover goes to black with white text, which is the same reversal the Rootways megamenu directly
 * above already performs (rootmegamenu_option/design/hoverbgcolor = 000000). The two rows of the
 * header then behave alike instead of each inventing its own.
 *
 * As with brand-gold.css, the real change is in web/tailwind/theme/header.css and this file exists
 * only because the Tailwind build cannot be run in this estate. DELETE BOTH, and their <css src>
 * lines, at the first genuine rebuild.
 */
.tf-announcement {
    background-color: var(--color-primary);
}

/*
 * The wrapper carries the padding by default, because a sentence with inline links has nothing else
 * to provide it. It was `0` on the assumption that a single block-level link always supplied it,
 * which stopped being true the moment the bar met production's two-link sentence.
 */
.tf-announcement .tf-announcement-inner {
    padding: 0.5rem 1rem;
}

/*
 * When the block IS one link, the link supplies its own padding so the entire strip is the hit area,
 * and the wrapper must not add a second layer around it.
 *
 * This is the only `:has()` in the file and it sits alone, so a browser without support drops just
 * this rule: the single-link bar keeps the wrapper's padding and shows a thin gold frame around the
 * hover state. Slightly loose, never broken, and it cannot affect the two-link case at all.
 */
.tf-announcement .tf-announcement-inner:has(> p > a:only-child),
.tf-announcement .tf-announcement-inner:has(> a:only-child) {
    padding: 0;
}

.tf-announcement .tf-announcement-inner p {
    margin: 0;
}

/*
 * TWO SHAPES OF ANNOUNCEMENT, AND THE BAR HAS TO SURVIVE BOTH.
 *
 * The whole-bar-as-one-button design assumes the CMS block wraps its entire sentence in a SINGLE
 * link. That is how box5's block is written. Production's block -- the one staff signed off -- is a
 * sentence with TWO inline links:
 *
 *     <p><strong>Ordering from outside the UK?</strong> Please read:
 *        <a>Info for international customers</a> and <a>EU customs charge</a></p>
 *
 * With `display:block; width:100%` on every `a`, those two links became two full-width rows and the
 * bar went four lines deep on the live site, 2026-09-24. The rule was right for the content it was
 * written against and wrong for the content it met.
 *
 * So the button treatment is scoped to `:only-child`. Text nodes are not element children, so an
 * `a` that is the sole ELEMENT in the paragraph matches, and two links in a sentence do not. Each
 * block gets the treatment that suits its own shape, with no per-store switch to keep in step.
 */

/* Default: links inside a sentence stay inline, and look like links. */
.tf-announcement .tf-announcement-inner a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
    transition: color .15s ease;
}

.tf-announcement .tf-announcement-inner a:hover,
.tf-announcement .tf-announcement-inner a:focus-visible {
    text-decoration: none;
}

/* One link wrapping the whole sentence: the entire strip becomes the hit area. */
.tf-announcement .tf-announcement-inner a:only-child {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: 400;
    color: #fff;
    background-color: var(--color-primary);
    transition: background-color .15s ease, color .15s ease;
}

.tf-announcement .tf-announcement-inner a:only-child:hover,
.tf-announcement .tf-announcement-inner a:only-child:focus-visible {
    background-color: #000;
    color: #fff;
    text-decoration: underline;
}