/* ==========================================================================
   Checker Cells — the brand lockup
   Component: resources/views/components/brand-lockup.blade.php
   Loaded by the public layout AND by the admin panel (registered as a
   Filament asset), so nothing in here may reach outside `.ec-brand`.

   Sizes are two custom properties: --ec-mark is the VISIBLE mark (the 3×3
   cells, not the SVG box, which carries 12/96 of clear space on each side)
   and --ec-name the wordmark size. Everything else derives from them:
     · gap between mark and name = 38% of the mark (§04),
     · trailing clear space      = one cell plus its gap = 25/72 of the mark (§02),
     · tagline size and indent   = the §04 lockup ratios.
   A preset (header, footer, about, loader, admin) sets the two properties —
   including the responsive and sticky values — so no caller repeats them.
   ========================================================================== */

.ec-brand {
    --ec-mark: 32px;
    --ec-name: 20px;
    --ec-gap: calc(var(--ec-mark) * .38);
    --ec-safe: calc(var(--ec-mark) * .35);
    --ec-ink: #181e32;
    --ec-accent: #0f766e;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 100%;
    padding-inline-end: var(--ec-safe);
    color: var(--ec-ink);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: var(--ec-name);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
}

/* §04 — Arabic sets 5% larger than the Latin so the optical weight matches,
   and Arabic letters are never tracked. */
.ec-brand--ar {
    font-family: "Cairo", "Tahoma", sans-serif;
    font-size: calc(var(--ec-name) * 1.05);
    font-weight: 700;
    letter-spacing: normal;
}

/* §06 — on navy the ink is cloud and the accent is mint (teal on navy is
   only 3.0:1 and forbidden). */
.ec-brand--dark {
    --ec-ink: #f7f9fc;
    --ec-accent: #2dd4bf;
}

.ec-brand__row {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-gap);
}

/* The SVG box is the mark divided by .75; the negative margin pulls the
   built-in clear space out of the layout so the box the browser lays out IS
   the visible mark, and the gap is measured from the cells, not the file. */
.ec-brand__mark {
    display: block;
    flex: 0 0 auto;
    width: calc(var(--ec-mark) / .75);
    height: calc(var(--ec-mark) / .75);
    margin: calc(var(--ec-mark) / -6);
}

.ec-brand__name {
    display: block;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* §04 tagline lockup: Latin at 10.5/18 of the name with .18em tracking,
   Arabic at 12.5/19 of the name and never tracked; indented under the name
   by the mark plus the gap. */
.ec-brand__tagline {
    display: block;
    padding-inline-start: calc(var(--ec-mark) + var(--ec-gap));
    color: var(--ec-accent);
    font-size: calc(var(--ec-name) * (10.5 / 18));
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.3;
}

.ec-brand--ar .ec-brand__tagline {
    font-size: calc(var(--ec-name) * 1.05 * (12.5 / 19));
    letter-spacing: normal;
}

/* Centred construction for a constrained column (the About stage, the
   loader on a phone): no indent, and the phrase may wrap rather than shrink
   below a readable size. */
.ec-brand--compact {
    align-items: center;
}

.ec-brand--compact .ec-brand__tagline {
    padding-inline-start: 0;
    text-align: center;
    white-space: normal;
}

/* --------------------------------------------------------------------------
   Presets
   -------------------------------------------------------------------------- */

.ec-brand--header {
    --ec-mark: 32px;
    --ec-name: 20px;
}

@media (max-width: 768px) {
    .ec-brand--header {
        --ec-mark: 26px;
        --ec-name: 18px;
    }
}

/* The pinned bar compacts like production (owner decision 2026-08-31):
   checker-cells-theme.css holds the mark's box at 30px and the name at 16px
   in the sticky state; a 30px box is a 22.5px mark, restated here so the
   gap and clear space compact with it instead of staying at resting size. */
.headerbg.sticky .ec-brand--header {
    --ec-mark: 22.5px;
    --ec-name: 16px;
}

.ec-brand--footer {
    --ec-mark: 32px;
    --ec-name: 20px;
}

.ec-brand--about {
    --ec-mark: 56px;
    --ec-name: 26px;
}

@media (max-width: 575.98px) {
    .ec-brand--about {
        --ec-mark: 44px;
        --ec-name: 22px;
    }
}

/* --------------------------------------------------------------------------
   Vertical construction (About stage, round 5): the mark above the name, the
   tagline under both, everything centred. Built from the same symbol file
   and the localised name — no archived EventsInforma mark, nothing invented.
   The mark-to-name gap is 45% of the mark; the tagline sits at 40%. Arabic
   is never tracked; the name is never shrunk to fit a narrow stage.
   -------------------------------------------------------------------------- */
.ec-brand--vertical {
    align-items: center;
    gap: calc(var(--ec-mark) * .4);
    padding-inline-end: 0;
    text-align: center;
    white-space: normal;
}

.ec-brand--vertical .ec-brand__row {
    flex-direction: column;
    gap: calc(var(--ec-mark) * .45);
}

.ec-brand--vertical .ec-brand__tagline {
    padding-inline-start: 0;
    text-align: center;
    white-space: normal;
}

.ec-brand--vertical.ec-brand--about {
    --ec-mark: 72px;
    --ec-name: 30px;
}

@media (max-width: 575.98px) {
    .ec-brand--vertical.ec-brand--about {
        --ec-mark: 56px;
        --ec-name: 24px;
    }
}

.ec-brand--loader {
    --ec-mark: 40px;
    --ec-name: 26px;
}

@media (max-width: 479.98px) {
    .ec-brand--loader {
        --ec-mark: 32px;
        --ec-name: 22px;
    }
}

/* Filament sizes its brand slot at 2rem; a 24px mark is a 32px box. */
.ec-brand--admin {
    --ec-mark: 24px;
    --ec-name: 17px;
}