/*
 * Rules awaiting a sass rebuild.
 *
 * Each one mirrors a rule added to the matching sass partial. The compiled
 * sass/collected.css is what the site actually loads and the repo carries no build
 * tooling, so they ship as their own stylesheet (same approach as
 * inc/css/distributor-overlay.css). Once collected.css is rebuilt from source,
 * delete this file and its enqueue in inc/enqueue.php.
 */

/*
 * 1. Readable links inside a CTA card.
 *
 * The theme's global link colour is $color__prim (#000). A .cta-block card is dark
 * blue (#005581) or grey (#4a6670), so an unstyled link in its body text renders
 * near-black on dark - roughly 2:1, well under WCAG AA. The card's own copy is
 * already $light_grey; its links should sit in the same range.
 */

.cta-block .cta-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cta-block .cta-text a:hover,
.cta-block .cta-text a:focus-visible {
    color: #DEF5FD;
}

/*
 * 2. Left-aligned variant.
 *
 * .cta-block centres everything, which suits a short call to action but not a block
 * of ordering instructions carrying a table of reference numbers.
 */

#order-through-the-va .cta-block {
    align-items: flex-start;
    text-align: left;
}

/*
 * 3. The distributor's details, as a panel inside the card.
 *
 * Still no rules and no borders - the lift comes from a tinted panel, a muted
 * uppercase label column and values in full white, so the contact details read as
 * their own block rather than as more body copy. The label column shrinks to its
 * content so the values line up in a single column beside it.
 */

.cta-block .cta-text .contact-card {
    margin: 0 0 32px;
    padding: 28px 32px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.08);
}

.cta-block .cta-text .contact-card__eyebrow {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cta-block .cta-text .contact-card__name {
    margin: 0 0 20px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.cta-block .cta-text .contact-table {
    width: auto;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    text-align: left;
}

.cta-block .cta-text .contact-table th,
.cta-block .cta-text .contact-table td {
    padding: 6px 0;
    border: 0;
    text-align: left;
    vertical-align: baseline;
}

.cta-block .cta-text .contact-table th {
    width: 1%;
    padding-right: 32px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cta-block .cta-text .contact-table td {
    color: #fff;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575px) {
    .cta-block .cta-text .contact-card {
        padding: 20px 20px;
    }

    .cta-block .cta-text .contact-table th {
        padding-right: 16px;
    }
}

/*
 * 4. Swoosh behind the Veterans hero.
 *
 * The same artwork the CTA sections carry (@include cta_swoosh), placed on the
 * page's <main> rather than on the hero itself: .hero-text-img is a .container, so
 * a background on it would stop at the content width instead of running the full
 * width of the window the way it does in a CTA section. Sized to the viewport
 * width and pinned to the top, it sits behind the hero and nothing else.
 */

.magnes-page-veterans .site-main {
    background-image: url("data:image/svg+xml,%3Csvg width='1440' height='541' viewBox='0 0 1440 541' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_396_14875)'%3E%3Cpath d='M112.368 144.54C180.367 168.679 232.549 220.323 281.894 277.642C329.38 332.805 376.441 390.919 438.277 424.478C565.764 493.677 715.526 458.567 840.372 399.28C979.893 332.994 1110.97 233.262 1261.84 204.168C1335.84 189.904 1414.99 196.752 1479.44 244.688C1532.83 284.415 1561.76 347.296 1573.82 418.008C1580.67 458.189 1583.02 498.974 1584.88 539.835H1601.02C1600.5 528.258 1599.98 516.681 1599.26 505.179C1595.25 438.288 1587.39 368.786 1557.09 310.256C1522.65 243.78 1461.63 201.557 1397.06 186.234C1318.26 167.506 1236.53 185.364 1161.29 214.383C1088.79 242.343 1020.14 281.766 951.454 320.13C820.347 393.378 675.02 467.685 525.877 436.812C490.981 429.586 457.095 416.306 426.21 396.102C395.683 376.163 368.842 349.982 343.534 322.06C294.026 267.503 249.215 205.454 190.086 164.139C128.903 121.386 55.261 102.582 -15.6739 111.359C-15.7717 111.359 -15.8695 111.359 -16 111.397V130.579C26.9197 125.056 70.72 129.785 112.368 144.54Z' fill='%23DEF5FD'/%3E%3Cpath d='M199.022 430.644C355.047 498.254 526.856 434.389 643.515 368.898C703.557 335.187 762.034 295.234 818.586 256.567C891.804 206.512 967.5 154.754 1047.14 116.276C1124.86 78.7068 1322.11 3.98357 1474.29 120.892C1561.82 188.162 1622.68 312.259 1655.16 489.741C1658.23 506.426 1660.97 523.338 1663.64 540.25H1666.97C1664.26 523.073 1661.46 505.896 1658.36 488.947C1625.71 310.481 1564.4 185.589 1476.11 117.752C1322.6 -0.178234 1124.11 74.999 1045.9 112.796C966.065 151.387 890.238 203.182 816.923 253.313C760.403 291.942 701.992 331.858 642.08 365.493C525.975 430.681 355.079 494.281 200.131 427.087C144.916 403.138 94.5605 363.639 45.8682 325.426C25.5498 309.497 5.00316 293.418 -16.0327 278.322V282.786C4.3835 297.504 24.3105 313.13 44.0418 328.604C92.8972 366.93 143.416 406.581 199.022 430.681V430.644Z' fill='%23F4F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_396_14875'%3E%3Crect width='1440' height='540' fill='white' transform='translate(0 0.249512)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/*
 * 5. The HubSpot modal heading, when the modal lives inside a dark card.
 *
 * render_hubspot_cta() prints the overlay inside the card that opens it, so
 * `.cta-block-wrapper .cta-block h3` and `.cta-pair-wrapper .cta-pair-card.dark h3`
 * - both written as descendant selectors - also matched the modal's own <h3>,
 * painting it white on the modal's white background. Invisible, at 1:1. The sass
 * partials now use `> h3`; these two rules carry the same specificity as the ones
 * they correct and load after them, so they win until collected.css is rebuilt.
 */

.cta-block-wrapper .cta-block .hubspot-form-modal h3,
.cta-pair-wrapper .cta-pair-card .hubspot-form-modal h3 {
    color: #005581;
}

/*
 * 6. The store locator's "coming soon" badge.
 *
 * mu-plugins/magnes-locator-coming-soon.php appends it to a location's name wherever
 * WP Store Locator renders one. It carries its own background so it reads the same in the
 * result list (grey rows) and in the map info window (white). #005581 on #DEF5FD is
 * about 7:1. Mirrors the rule added to sass/sections/_partner-locator.scss.
 */

.wpsl-coming-soon {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 100px;
    background-color: #DEF5FD;
    color: #005581;
    font-family: "League Spartan", sans-serif, Arial;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* The plugin sets every span inside an info window to display: block, which would stretch
 * the pill across the whole bubble. */

.wpsl-info-window .wpsl-coming-soon {
    display: inline-block;
    width: auto;
}