/* ==========================================
   PRIVACY-CONSENT-01 · FRANZ consent panel
========================================== */

/* The legacy assets/css/theme.css re-declares `--franz-soft` on `:root` as
   #f3f1ec and, loading after core/colors.css, wins site-wide - which would put
   a near-white grey on the cream panel instead of the FRANZ beige. The dialog
   therefore pins the token back to the canonical core/colors.css value for its
   own subtree, the same way .franz-os-homepage--editorial scopes its palette.
   Nothing outside the dialog is affected and theme.css stays untouched. */
.franz-consent {
    --franz-soft: #efe4d4;
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(31, 27, 22, 0.44);
}

.franz-consent[hidden] {
    display: none;
}

.franz-consent__panel {
    width: min(100%, 30rem);
    padding: clamp(24px, 4vw, 40px);
    background: var(--franz-cream);
    color: var(--franz-dark);
    border-radius: var(--radius-md);
    box-shadow: var(--franz-shadow-lg);
}

.franz-consent__panel:focus {
    outline: none;
}

.franz-consent__title {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    letter-spacing: -0.02em;
}

.franz-consent__text {
    margin: 0 0 16px;
    color: var(--franz-text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.franz-consent__more {
    margin: 0 0 24px;
    font-size: 0.9rem;
}

.franz-consent__more a {
    color: var(--franz-gold-text);
    text-underline-offset: 3px;
}

.franz-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Both decisions share the base .franz-button geometry, so only the colour
   treatment differs: "Nur notwendige" is the warm beige surface with a dark
   outline, so it stays a recognisable control instead of dissolving into the
   cream panel; "Analyse erlauben" keeps the dark primary treatment. The wider
   border is declared on both controls so their dimensions stay identical. */
.franz-consent__actions .franz-button {
    flex: 1 1 auto;
    border-width: 2px;
}

/* The legacy assets/css/theme.css still owns `.franz-button` with
   `background`, `color`, `padding` and `border-radius` marked `!important`,
   plus a gold `!important` hover. It is enqueued before this stylesheet, but
   `!important` beats source order and any specificity, so the two colour
   declarations this dialog owns have to be restated the same way. The
   selectors are anchored on `.franz-consent`, so nothing outside the consent
   dialog is affected and theme.css itself stays untouched. Padding and radius
   are deliberately left to the legacy rule: it applies to both decisions
   equally, so the pair stays dimensionally identical. */
.franz-consent .franz-consent__actions .franz-button--secondary,
.franz-consent .franz-consent__actions .franz-button--secondary:hover,
.franz-consent .franz-consent__actions .franz-button--secondary:active,
.franz-consent .franz-consent__actions .franz-button--secondary:focus-visible {
    background-color: var(--franz-soft) !important;
    background-image: none !important;
    color: var(--franz-dark) !important;
    border-color: var(--franz-dark);
}

/* Hover and press darken the beige with a translucent layer of the same brand
   dark that draws the outline, so no additional colour value is introduced and
   the legacy gold hover never reaches this control. The focus outline from
   core/buttons.css is not overridden. */
.franz-consent .franz-consent__actions .franz-button--secondary:hover {
    background-image: linear-gradient(rgba(31, 27, 22, 0.08), rgba(31, 27, 22, 0.08)) !important;
    transform: translateY(-1px);
}

.franz-consent .franz-consent__actions .franz-button--secondary:active {
    background-image: linear-gradient(rgba(31, 27, 22, 0.16), rgba(31, 27, 22, 0.16)) !important;
    transform: translateY(0);
}

/* "Analyse erlauben" has to hold its dark surface through every state for the
   same reason: theme.css would otherwise hand it the gold legacy hover inside
   the dialog too. The state variation is a translucent white layer over the
   same --franz-dark surface - no new colour value, and the light label keeps a
   contrast ratio far above AA (about 12.8:1 on the hover shade). The lift
   matches the beige button's, so the pair moves as one. */
.franz-consent .franz-consent__actions .franz-button--primary,
.franz-consent .franz-consent__actions .franz-button--primary:hover,
.franz-consent .franz-consent__actions .franz-button--primary:active,
.franz-consent .franz-consent__actions .franz-button--primary:focus-visible {
    background-color: var(--franz-dark) !important;
    background-image: none !important;
    color: var(--franz-white) !important;
}

.franz-consent .franz-consent__actions .franz-button--primary:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.10)) !important;
    transform: translateY(-1px);
}

.franz-consent .franz-consent__actions .franz-button--primary:active {
    background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) !important;
    transform: translateY(0);
}

/* Footer re-open trigger — matches the surrounding footer links. */
.franz-consent-trigger {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.franz-consent-trigger:hover {
    color: var(--franz-green);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.franz-consent-trigger:focus-visible {
    border-radius: var(--radius-xs);
    outline: 3px solid var(--franz-green);
    outline-offset: 3px;
}

body.franz-consent-open {
    overflow: hidden;
}

@media (min-width: 720px) {
    .franz-consent {
        align-items: center;
    }
}

@media (max-width: 480px) {
    .franz-consent__actions .franz-button {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .franz-consent .franz-consent__actions .franz-button:hover {
        transform: none;
    }
}