/**
 * SWD Image brand + Tool header adapter.
 *
 * Visual ownership:
 * - SWD Image keeps the dark Tool identity migrated from SWD2026.
 * - Header control scale follows the current SWD2026COM commercial header.
 * - The migrated Image runtime/header CSS remains untouched; this file is the
 *   destination adapter loaded last so the original tool logic stays portable.
 */

/* --------------------------------------------------------------------------
   Shared brand accent
   -------------------------------------------------------------------------- */

/* Global visible naming contract for the complete SWD Image family.
   Every rendered occurrence of `SWD Image Compressor` is decorated by the
   shell (including dynamically opened modals). The default context is the
   dark/white-copy treatment: `Compressor` uses the SWD yellow accent. */
body.irx-site {
    --swd-image-compressor-accent: #f2c230;
}

.irx-site .irx-brand__name .s_accent,
.irx-site .irx-short-brand .s_accent,
.irx-site .irx-brand-compressor {
    color: var(--swd-image-compressor-accent, #f2c230);
    -webkit-text-stroke: 0;
    paint-order: normal;
    text-shadow: none;
}

/* Contextual inverse: on canonical yellow surfaces the base copy is black,
   therefore `Compressor` must become white. These surfaces cover the active
   FAQ state, support cards and every migrated share/review/coffee modal face. */
body.irx-site[data-irx-service="compression"] .irx-faq__item[open] summary,
body.irx-site[data-irx-service="compression"] .irx-support-card,
body.irx-site[data-irx-service="compression"] .irx-origin-dialog .irx-share-dialog__panel,
body.irx-site[data-irx-service="compression"] .irx-air-card__face,
body.irx-site[data-irx-service="compression"] .irx-coffee-dialog__panel {
    --swd-image-compressor-accent: #fff;
}

body.irx-site[data-irx-service="compression"] .irx-faq__item[open] summary .irx-short-brand .s_accent,
body.irx-site[data-irx-service="compression"] .irx-support-card .irx-brand-compressor,
body.irx-site[data-irx-service="compression"] .irx-origin-dialog .irx-share-dialog__panel .irx-short-brand .s_accent,
body.irx-site[data-irx-service="compression"] .irx-air-card__face .irx-short-brand .s_accent,
body.irx-site[data-irx-service="compression"] .irx-coffee-dialog__panel .irx-short-brand .s_accent {
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    paint-order: normal !important;
    text-shadow: none !important;
}

/* --------------------------------------------------------------------------
   SWD Image logo
   -------------------------------------------------------------------------- */

/* Base mark: the complete ring between the black disc and the outer edge is
   SWD yellow. The legacy SVG class name `inner-white-ring` is kept for asset
   compatibility, but it now participates in the accent ring. */
.swd-image-logo .outer-accent-ring,
.swd-image-logo .inner-white-ring { fill: #f2c230; }
.swd-image-logo .s-glyph,
.swd-image-logo .image-glyph,
.swd-image-logo .satellite-fill { fill: #fff; }
.swd-image-logo .black-disc,
.swd-image-logo .satellite-outline { fill: #000; }

/* The migrated SWD2026 header expected a second hover SVG. SWD2026COM uses
   one semantic SVG, so the real logo must never be faded out on hover. */
.irx-brand__home:is(:hover, :focus-visible) .irx-brand__svg-wrap--default {
    opacity: 1;
}

/* Header/footer interaction: the whole yellow ring turns white while the S
   and the satellite fill turn yellow. The image pictogram stays white. */
.irx-brand__home:is(:hover, :focus-visible) .swd-image-logo .outer-accent-ring,
.irx-brand__home:is(:hover, :focus-visible) .swd-image-logo .inner-white-ring { fill: #fff; }
.irx-brand__home:is(:hover, :focus-visible) .swd-image-logo .s-glyph,
.irx-brand__home:is(:hover, :focus-visible) .swd-image-logo .satellite-fill { fill: #f2c230; }

.irx-brand__home:focus-visible {
    border-radius: 50%;
    outline: 2px solid #f2c230;
    outline-offset: 0.25rem;
}

.irx-brand__svg-wrap--default .swd-image-logo {
    display: block;
    width: 100%;
    height: 100%;
    /* The SWD Image source SVG keeps ~7% optical whitespace around its outer
       yellow circle. Scale the complete artwork proportionally so that the
       yellow-circle radius matches the 2.75rem SWD logo used by the commercial
       header, without changing SVG geometry or viewBox. */
    transform: scale(1.16154);
    transform-origin: 50% 50%;
}

/* Processing pulse: reproduce the exact header/footer hover colour state at
   the peak of the existing 2 s pulse. Geometry/scale remains owned by the
   workspace CSS; this adapter owns only the semantic SWD Image colours. */
.irx-processing-brand__logo .swd-image-logo .outer-accent-ring,
.irx-processing-brand__logo .swd-image-logo .inner-white-ring {
    animation: swd-image-processing-ring-pulse 2s ease-in-out infinite;
}

.irx-processing-brand__logo .swd-image-logo .s-glyph,
.irx-processing-brand__logo .swd-image-logo .satellite-fill {
    animation: swd-image-processing-glyph-pulse 2s ease-in-out infinite;
}

@keyframes swd-image-processing-ring-pulse {
    0%, 74%, 100% { fill: #f2c230; }
    86% { fill: #fff; }
}

@keyframes swd-image-processing-glyph-pulse {
    0%, 74%, 100% { fill: #fff; }
    86% { fill: #f2c230; }
}

@media (prefers-reduced-motion: no-preference) {
    .swd-image-logo * { transition: fill 180ms ease; }
}

@media (prefers-reduced-motion: reduce) {
    .irx-processing-brand__logo .swd-image-logo .outer-accent-ring,
    .irx-processing-brand__logo .swd-image-logo .inner-white-ring,
    .irx-processing-brand__logo .swd-image-logo .s-glyph,
    .irx-processing-brand__logo .swd-image-logo .satellite-fill {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Tool header — exact SWD2026COM commercial-header control scale
   -------------------------------------------------------------------------- */

:root {
    --swd-image-header-control-size: 2.75rem;
}

.irx-header__inner {
    min-height: 5.5rem;
    gap: var(--space-2);
}

.irx-brand {
    gap: var(--space-2);
}

.irx-brand__mark {
    width: var(--swd-image-header-control-size);
    height: var(--swd-image-header-control-size);
    flex-basis: var(--swd-image-header-control-size);
    overflow: hidden;
}

.irx-brand__svg-wrap {
    padding: 0;
}

.irx-brand__name {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.6;
}

.irx-header__right {
    gap: var(--space-2);
}

/* Tool navigation remains visually native to the dark Image shell while using
   the same typographic scale as the commercial header. */
.irx-tools-nav {
    gap: var(--space-2);
    padding-bottom: 0;
    scrollbar-width: none;
}

.irx-tools-nav::-webkit-scrollbar {
    display: none;
}

.irx-tools-nav .irx-nav__link {
    min-height: 2.75rem;
    align-items: center;
    padding-inline: var(--space-2);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
    text-underline-offset: initial;
}

.irx-tools-nav .irx-nav__link:is(:hover, :focus-visible) {
    color: #fff;
    text-decoration: none;
}

.irx-tools-nav .irx-nav__link:focus-visible {
    border-radius: var(--radius-sm, 0.375rem);
    color: #fff !important;
    background: transparent;
    outline: 0.2rem solid #f2c230;
    outline-offset: 0.16rem;
    box-shadow: inset 0 0 0 0.12rem #f2c230;
}

.irx-tools-nav .irx-nav__link[aria-current="page"] {
    color: #f2c230;
    text-decoration: none;
}

/* Locale selector: same control dimensions and typography as the current
   commercial header, with the Image dark-shell palette. */
.irx-lang-slider {
    display: inline-flex;
    min-width: 0;
    margin-inline: 0;
    padding: 0;
    align-items: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.irx-lang-slider__arrow,
.irx-lang-slider__current {
    display: grid;
    min-width: 2.25rem;
    min-height: 2.75rem;
    width: auto;
    height: auto;
    padding: 0.25rem;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
}

.irx-lang-slider__arrow {
    color: var(--color-text);
}

.irx-lang-slider__current {
    color: var(--color-accent);
    letter-spacing: normal;
}

.irx-lang-slider__arrow:is(:hover, :focus-visible) {
    color: var(--color-text);
    background: transparent;
    transform: none;
}

/* --------------------------------------------------------------------------
   Coffee header trigger
   -------------------------------------------------------------------------- */

/* The yellow coffee circle uses exactly the same outer diameter/radius as the
   SWD commercial logo and SWD Image logo. */
.irx-coffee-header-cta {
    width: var(--swd-image-header-control-size);
    height: var(--swd-image-header-control-size);
    flex-basis: var(--swd-image-header-control-size);
    overflow: visible;
}

/* Keep the migrated cup at its current responsive size; only establish layer
   order so the cup sits visually above the white satellite circle. */
.irx-coffee-header-cta__cup {
    position: relative;
    z-index: 3;
}

/* White satellite: its centre sits approximately on the circumference of the
   yellow circle, so half of the satellite projects outside. The + is centred
   by the grid and the cup remains above it. */
.irx-coffee-header-cta__plus {
    top: -0.1rem;
    right: -0.1rem;
    z-index: 2;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0;
    border-width: 0.1rem;
    font-size: 0.72rem;
    line-height: 1;
}

/* Hamburger follows the same 2.75rem control scale used by SWD2026COM. */
.irx-menu-toggle {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
}

/* The commercial shell only exposes the brand name on desktop. */
@media (min-width: 75rem) {
    .irx-brand__name {
        display: inline-block;
    }

    .irx-header__inner {
        gap: var(--space-3);
    }

    .irx-header__right {
        gap: var(--space-3);
    }
}

/* Tool has no second-row commercial CTA, so it keeps the commercial compact
   row height on small screens rather than reserving an empty second row. */
@media (max-width: 74.999rem) {
    .irx-header__inner {
        min-height: 5.5rem;
        padding-block: var(--space-2) !important;
    }

    .irx-brand__name {
        display: none;
    }

    .irx-lang-slider {
        margin-inline: 0 !important;
    }

    .irx-header__right {
        gap: var(--space-2) !important;
    }
}

@media (max-width: 29.999rem) {
    .irx-header__inner,
    .irx-header__right {
        gap: var(--space-1) !important;
    }

    .irx-lang-slider {
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   Mobile navigation — SWD2026COM CommercialShell contract
   -------------------------------------------------------------------------- */

/*
 * Do not use the legacy `.irx-menu-toggle` class here. The migrated SWD2026
 * stylesheet contains broad selectors such as `.irx-menu-toggle span` that
 * would style the push-button wrapper spans and deform the hamburger/X.
 * Reusing CommercialShell's `site-navigation*` DOM contract gives Image the
 * same button physics, hamburger animation and opened-panel behaviour.
 */
.irx-site-navigation {
    justify-self: end;
}

.irx-site-navigation .site-navigation__toggle {
    display: inline-flex;
}

.irx-site-navigation .site-navigation__icon,
.irx-site-navigation .site-navigation__icon span {
    display: block;
}

.irx-site-navigation .site-navigation__icon {
    width: 1.25rem;
}

.irx-site-navigation .site-navigation__icon span {
    height: 2px;
    margin-block: 0.24rem;
    background: currentcolor;
    transition: transform 180ms ease, opacity 180ms ease;
}

.irx-site-navigation.is-open .site-navigation__icon span:first-child {
    transform: translateY(0.48rem) rotate(45deg);
}

.irx-site-navigation.is-open .site-navigation__icon span:nth-child(2) {
    opacity: 0;
}

.irx-site-navigation.is-open .site-navigation__icon span:last-child {
    transform: translateY(-0.48rem) rotate(-45deg);
}

.irx-site-navigation .site-navigation__panel {
    position: fixed;
    z-index: 45;
    inset: 5.5rem 0 auto;
    display: none;
    max-height: calc(100vh - 5.5rem);
    max-height: calc(100dvh - 5.5rem);
    overflow-y: auto;
    border-block-end: 1px solid var(--color-border);
    background: var(--color-bg);
}

.irx-site-navigation.is-open .site-navigation__panel {
    display: block;
}

.irx-site-navigation .site-navigation__list {
    display: grid;
    gap: var(--space-1);
    width: min(100% - 2rem, var(--container));
    margin: 0 auto;
    padding: var(--space-3) 0;
    list-style: none;
}

.irx-site-navigation .site-navigation__link {
    display: flex;
    min-height: 3rem;
    align-items: center;
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none;
}

.irx-site-navigation .site-navigation__link:hover,
.irx-site-navigation .site-navigation__link:focus-visible,
.irx-site-navigation .site-navigation__link[aria-current="page"] {
    background: transparent;
    color: var(--color-accent);
    text-decoration: none;
}

@media (min-width: 75rem) {
    .irx-site-navigation {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .irx-site-navigation .site-navigation__icon span {
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Viewport containment — no page X-overflow, without breaking host container
   -------------------------------------------------------------------------- */

/* Never let the page itself become wider than the viewport. This rule is kept
   on the page/root only: the header's inner `.container` must retain the same
   side gutters and max-width used by CommercialShell. */
html:has(body.irx-site),
body.irx-site {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

.irx-site .site-main,
.irx-site .irx-header,
.irx-site .irx-footer {
    max-width: 100%;
    min-width: 0;
}

/* IMPORTANT: do not set width:100% on `.irx-header__inner` or
   `.irx-header__right`. Doing so overrides CommercialShell's `.container`
   gutters and makes the right flex group consume the full row, collapsing the
   visible `SWD Image Compressor` brand name. */
.irx-site .irx-header__inner {
    min-width: 0;
}

.irx-site .irx-header__right {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 0 1 auto;
}

.irx-site .irx-brand {
    min-width: 0;
    flex: 0 1 auto;
}

/* At the same desktop breakpoint used by CommercialShell the complete brand
   name is visible. `!important` only neutralizes the legacy SWD2026 max-width
   rule that hid the old Tool name below/around the desktop transition. */
@media (min-width: 75rem) {
    .irx-site .irx-brand__name {
        display: inline-block !important;
    }
}

/* The modular host already gives the Tool a full-width main. Remove only the
   old 100vw breakout from hero/slider; this is the real source of page-level
   horizontal overflow and does not require touching header/container width. */
body[data-irx-service="compression"] .irx-compression-hero,
body[data-irx-service="compression"] .irx-service-hero-slider {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Allow potentially wide flex/grid children to shrink inside their own area.
   Keep the host `.container` width untouched so its 1rem side gutters remain. */
.irx-site .irx-brand,
.irx-site .irx-tools-nav,
.irx-site .irx-site-navigation,
.irx-site .site-navigation__panel,
.irx-site .site-navigation__list,
.irx-site #selector-imagenes {
    max-width: 100%;
    min-width: 0;
}

@supports not (overflow: clip) {
    html:has(body.irx-site),
    body.irx-site {
        overflow-x: hidden;
    }
}