/* DaisyCon Auto Affiliate — Frontend styles
   Linear-inspired monochrome · No shadows · 1px borders only */

@import url('./tokens.css');

/* === Affiliate link (inline text) === */
.dcae-aff-link {
    color: var(--dcae-navy-700);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.dcae-aff-link:hover {
    color: var(--dcae-navy-900);
}
.dcae-aff-link[data-adult="1"] {
    color: var(--dcae-adult);
    border-bottom: 1px dashed var(--dcae-adult);
}

/* === Inline ad block ===
 *
 * Operator feedback on the live card: "i like this small one but could we frame it
 * beatifully? the view offer and the image now have lot of space in between ... maybe box
 * around on left of right side?"
 *
 * The old layout was a flex ROW (logo | text, with the CTA underneath the text), so a short
 * two-line description left a tall empty column beside a 40px logo, and the CTA floated far
 * below it. The fix is a two-column card where the logo sits in its own framed panel that
 * stretches to the full card height — the whitespace becomes deliberate framing instead of
 * a gap — with the title, description and CTA stacked in the content column.
 */
.dcae-ad {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 28px auto;
    padding: 0;
    background: var(--dcae-ad-bg);
    border-radius: var(--dcae-radius);
    overflow: hidden;
    max-width: 520px;
    color: var(--dcae-white);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* The framed logo panel. `flex: none` keeps it a fixed column; the card's own stretch makes
   it full height, which is what turns the leftover space into a balanced frame. */
.dcae-ad__media {
    flex: none;
    width: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.dcae-ad[data-adult="1"] .dcae-ad__media {
    background: rgba(255, 255, 255, 0.05);
}
.dcae-ad__logo {
    width: 52px;
    height: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: var(--dcae-white);
    object-fit: contain;
    padding: 4px;
    flex-shrink: 0;
}
/* No logo published (the common case — see the Material column): a monogram tile keeps the
   panel's visual weight so the card does not collapse on one side. */
.dcae-ad__logo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dcae-navy-700);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dcae-ad__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 14px 18px;
}
.dcae-ad__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dcae-white);
}
.dcae-ad__desc {
    margin: 0;
    color: var(--dcae-slate-300);
    font-size: 13px;
    line-height: 1.45;
}
/* The CTA sits at the end of the content column, so it lands a consistent distance from the
   text instead of drifting to the card's bottom edge. */
.dcae-ad__cta {
    align-self: flex-start;
    margin-top: 4px;
    padding: 7px 14px;
    border-radius: 3px;
    background: var(--dcae-navy-50);
    color: var(--dcae-navy-900);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 120ms ease;
}
.dcae-ad__cta:hover,
.dcae-ad__cta:focus {
    background: var(--dcae-white);
    color: var(--dcae-navy-900);
    text-decoration: none;
}
.dcae-ad__disclosure {
    display: block;
    margin: 0;
    padding: 0 18px 12px;
    color: var(--dcae-disclosure);
    font-size: 10px;
    text-align: left;
}

/* Narrow screens: stack the panel above the content rather than squeezing the text into a
   sliver next to an 84px column. */
@media (max-width: 480px) {
    .dcae-ad {
        flex-direction: column;
        max-width: 100%;
    }
    .dcae-ad__media {
        width: 100%;
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }
    .dcae-ad__disclosure {
        padding-left: 18px;
    }
}

/* === Product card ===
 *
 * SIZE, MEASURED LIVE ON STAGING (2026-10-05) with Chrome DevTools at a 1280px viewport: the card
 * filled its container at **952 x 1136 px**, and the square product image alone was 922 x 922 —
 * about 81% of the card's height spent on a picture the reader scrolls straight past. Operator's
 * call: half the height, a fifth off the width.
 *
 * THREE CHANGES, and the middle one is the one that does the work:
 *   1. `max-width: 760px` — 952 x 0.8, the requested fifth off. It was 952 because the card had no
 *      width of its own and stretched to the article column.
 *   2. The image goes from 1:1 to 2:1. Card height follows CARD WIDTH, so this is what actually
 *      halves it: 760 minus borders and padding is 730 wide, so the image becomes 365 tall where
 *      it was 922.
 *   3. `.dcae-product-grid` is defined for the first time. The Gutenberg block renderer wraps
 *      cards in it and the stylesheet had no rule for it at all, so several products stacked at
 *      full column width instead of sharing a row.
 *
 * THE CLASS NAMES ARE ALSO FIXED HERE. The markup emits `dcae-product__name` and `__body`; this
 * stylesheet was styling `dcae-product__title` and `__brand`, which NOTHING emits. The product
 * name therefore had no rule at all and fell back to the browser default — measured at 16px /
 * weight 400, so the name rendered larger and lighter than the price beneath it. Both selectors
 * are kept on the shared rule so a cached page cannot lose its styling.
 */
.dcae-product {
    background: var(--dcae-product-bg);
    border: 1px solid var(--dcae-product-line);
    border-radius: var(--dcae-radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 28px auto;
    color: var(--dcae-white);
}
.dcae-product[data-adult="1"] {
    border-color: var(--dcae-adult);
}
/* THE IMAGE IS A LINK. The whole picture is clickable, not only the button underneath it —
   measured on the live card: the photo is 730x365 and the CTA is a 20px strip below it, so the
   largest element on the card was the one thing that did nothing. It stays a `display: flex`
   box so the `object-fit` centring is unchanged, and the anchor fills it so the entire area
   responds rather than just the pixels the photo happens to cover. */
.dcae-product__image {
    width: 100%;
    /* 2:1, not 1:1. The height is derived from the card width, so this single declaration is what
       halves the card. Reverting it to `1 / 1` brings the 1136px height straight back. */
    aspect-ratio: 2 / 1;
    background: var(--dcae-product-inset);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dcae-slate-300);
    font-size: 10px;
}
.dcae-product__image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.dcae-product__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* A hover cue, because a clickable image with no affordance is a coin flip for the reader.
       Subtle: opacity, not a border or a scale, so nothing moves and the layout cannot shift. */
    transition: opacity 120ms ease;
}
.dcae-product__image-link:hover img,
.dcae-product__image-link:focus-visible img {
    opacity: 0.82;
}
.dcae-product__image-link:focus-visible {
    outline: 2px solid var(--dcae-white);
    outline-offset: -2px;
}
.dcae-product__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* Several products side by side, as the block renderer emits them. `auto-fit` collapses to one
   column on a narrow screen without a media query, and the min track keeps a card readable
   rather than squeezing it. */
.dcae-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 28px 0;
}
/* Inside a grid the columns set the width, so the card's own cap and centring must stand down
   or every card would be capped at 760 and shoved to the middle of its cell. */
.dcae-product-grid .dcae-product {
    max-width: none;
    margin: 0;
}
.dcae-product__brand {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--dcae-slate-300);
    letter-spacing: 0.5px;
}
.dcae-product__name,
.dcae-product__title {
    font-size: 13px;
    font-weight: 500;
    color: var(--dcae-white);
    margin: 4px 0 8px;
    line-height: 1.4;
}
.dcae-product__price {
    font-size: 16px;
    font-weight: 600;
    color: var(--dcae-white);
    margin-top: auto;
}
.dcae-product__price-old {
    font-size: 13px;
    color: var(--dcae-slate-300);
    text-decoration: line-through;
    margin-left: 6px;
    font-weight: 400;
}
/* The CTA inverts, because on a dark card the old navy-on-white button has no contrast to sit
   against — it would read as a hole. White fill with navy text is the same relationship the card
   itself had before, moved one level down. */
.dcae-product__cta {
    display: block;
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--dcae-white);
    color: var(--dcae-navy-900);
    text-align: center;
    border-radius: var(--dcae-radius);
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}
.dcae-product__cta:hover,
.dcae-product__cta:focus-visible {
    background: var(--dcae-navy-50);
    color: var(--dcae-navy-900);
}
.dcae-product__disclosure {
    display: block;
    margin-top: 6px;
    color: var(--dcae-disclosure);
    font-size: 10px;
    text-align: center;
}

/* === Adult disclaimer banner === */
.dcae-adult-disclaimer {
    background: var(--dcae-white);
    border: 1px solid var(--dcae-adult);
    border-radius: var(--dcae-radius);
    padding: 10px 14px;
    margin: 16px 0;
    color: var(--dcae-slate-900);
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.dcae-adult-disclaimer__icon {
    color: var(--dcae-adult);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid var(--dcae-adult);
    border-radius: 3px;
    padding: 2px 6px;
    flex-shrink: 0;
}
.dcae-adult-disclaimer a {
    color: var(--dcae-navy-700);
    text-decoration: underline;
}

/* === Disclosure widget (footer) === */
.dcae-disclosure-widget {
    border-top: var(--dcae-border-thin);
    margin-top: 16px;
    padding-top: 12px;
    max-width: 720px;
}
.dcae-disclosure-widget p {
    font-size: 11px;
    color: var(--dcae-slate-500);
    line-height: 1.5;
    margin: 0;
}
.dcae-disclosure-widget a {
    color: var(--dcae-slate-700);
    text-decoration: underline;
}
.dcae-disclosure-widget a:hover {
    color: var(--dcae-navy-700);
}

/* === Placeholder stubs (Fase 0) === */
.dcae-ad-placeholder,
.dcae-product-placeholder {
    padding: 12px;
    background: var(--dcae-slate-50);
    border: 1px dashed var(--dcae-slate-300);
    color: var(--dcae-slate-500);
    font-family: var(--dcae-font-mono);
    font-size: 12px;
    text-align: center;
}

/* === Advertiser creative (the campaign's own banner) ===
 *
 * The advertiser supplies a ready snippet, but it carries an inline `style` attribute
 * (banned in this project) and needs the placeholders substituted per request. So the card is
 * re-rendered from its parts and styled here.
 *
 * The formats vary (728x90 through 160x600), so the frame is width-agnostic: the image scales
 * inside a centred box instead of forcing a layout per size.
 */
.dcae-ad--creative {
    display: block;
    margin: 28px auto;
    padding: 14px;
    max-width: 560px;
    background: var(--dcae-ad-bg);
    border-radius: var(--dcae-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    text-align: center;
}
.dcae-ad__creative-link {
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

/* Keyboard focus must be visible on the creative.
 *
 * This is the largest clickable element in the block and it had no focus rule at all — the
 * editorial link has carried `:focus-visible` from the start, so the element a reader is most
 * likely to tab to was the one that gave no indication it was focused. WCAG 2.4.7 (AA).
 *
 * `:focus-visible` rather than `:focus`: a mouse click on the creative should not leave a ring
 * behind it, while a keyboard tab must.
 *
 * The outline is drawn OUTSIDE the anchor with `outline-offset`, because the anchor wraps the
 * image and `line-height: 0` collapses its box to the image's height — an inset outline would be
 * painted over the creative itself, which is the advertiser's artwork. */
.dcae-ad__creative-link:focus-visible {
    outline: 3px solid var(--dcae-navy-700, #1e3a8a);
    outline-offset: 3px;
    border-radius: 3px;
}

/* And the CTA button, which had only a colour change on focus. */
.dcae-ad__cta:focus-visible {
    outline: 2px solid var(--dcae-navy-900, #172554);
    outline-offset: 2px;
}
.dcae-ad__creative {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
    border-radius: 3px;
}
.dcae-ad--creative .dcae-ad__disclosure {
    display: block;
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}

/* === Inline creative, sized to sit in the text flow ===
 *
 * The advertiser's 500x500 is their main asset but a full-width square mid-article is
 * visually heavy. Constraining it to a comfortable inline width — and centring it with a
 * caption — turns it into something that reads as part of the page rather than a billboard
 * dropped into it.
 */
.dcae-ad--creative {
    max-width: 420px;
}
.dcae-ad--creative .dcae-ad__creative {
    margin: 0 auto;
}

/* A wide leaderboard (728x90) must be allowed to use the full column, or it renders illegibly
   small at the 420px cap above.
 *
 * This used to be written as `.dcae-ad--creative:has(.dcae-ad__creative[width="728"])`.
 * `:has()` did not reach Firefox until 121 (December 2023), so in an older Firefox the rule
 * never matched and a leaderboard rendered at 420px — the exact failure it exists to prevent.
 * The renderer knows the creative's width, so it sets `dcae-ad--wide` itself and no browser
 * feature is required. See DCAE_Ad_Injector::render_creative(). */
.dcae-ad--creative.dcae-ad--wide {
    max-width: 100%;
    padding: 10px;
}

/* The caption is a legal disclosure, so it must be legible rather than faint — but still
   clearly subordinate to the creative. */
.dcae-ad--creative .dcae-ad__disclosure {
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.01em;
    opacity: 0.85;
}

/* === Terugval als het bannerbeeld niet komt ===
 *
 * Het beeld-URL van DaisyCon is tegelijk de registratie van de vertoning, dus het mag niet
 * vervangen worden door een eigen kopie (zie de publisher-FAQ over post-view attributie). Maar
 * die URL geeft één keer beeld per bezoeker en daarna niets meer: herlaadt iemand de pagina, dan
 * staat er een leeg vlak van 500 bij 500.
 *
 * De eerste aanvraag blijft dus precies zoals hij is — dit grijpt pas in als de browser hem als
 * mislukt meldt. Dan verdwijnt het beeld en wordt de link een gewone tekstlink, zodat er nooit
 * een gat staat en de klik bestemming blijft werken.
 */
.dcae-ad__link--leeg {
    display: inline-block;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: var(--dcae-radius, 6px);
}