/*
 * Zion - branding styles
 * Developed by Zion Web Services
 * ------------------------------------------------------------------
 * Kept in its own file (rather than edited into style.css) so the
 * branding layer stays easy to find, adjust, or lift into another
 * project without digging through 15,000 lines of theme CSS.
 */

/* ---- Text logo -------------------------------------------------
 * Replaces the old logo.png / logo-2.png / footer-bottom-logo.png
 * images. Built from live text + an inline SVG mark, so it stays
 * razor sharp on any screen and the wording can be edited directly
 * in the HTML - no image editor needed.
 *
 * It mirrors the original wordmark's format: a copper house mark,
 * then the name split into an ITALIC first syllable and an UPRIGHT
 * second one (the old logo did "Real" + "exa"; "Zi" + "on" splits
 * at the same kind of syllable break).
 * ---------------------------------------------------------------- */

.zion-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* Stops the parent <a> from adding link underlines/colour. */
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.zion-logo__mark {
    /* Sized in em so the mark scales with the wordmark automatically. */
    width: 1.35em;
    height: 1.35em;
    flex-shrink: 0;
    color: var(--theme-color1, #A06F49);
}

.zion-logo__word {
    font-family: var(--heading-font-family, "Playfair Display", serif);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--theme-color2, #111111);
}

/* The italic first syllable, echoing the original wordmark. */
.zion-logo__word em {
    font-style: italic;
    font-weight: 500;
}

/* Light variant - for dark backgrounds (mobile menu, footer). */
.zion-logo--light .zion-logo__word {
    color: #fff;
}

.zion-logo--light .zion-logo__mark {
    color: #fff;
}

/* Oversized variant - replaces the big washed-out footer wordmark. */
.zion-logo--xl .zion-logo__word {
    font-size: clamp(48px, 11vw, 132px);
    letter-spacing: 0.02em;
}

.zion-logo--xl {
    gap: 0.28em;
    opacity: 0.9;
}

@media (max-width: 767.98px) {
    .zion-logo__word {
        font-size: 23px;
    }
}

/* ---- Preloader logo --------------------------------------------
 * The loading screen was the last place still showing the old
 * "Realexa" brand, because that logo was baked into images/logo.png
 * and painted by CSS (.preloader:after) rather than written as text
 * in the HTML - so it survived the site-wide find-and-replace.
 *
 * Fix: hide that pseudo-element and centre the real .zion-logo
 * markup, which now lives inside the .preloader div.
 * ---------------------------------------------------------------- */

.preloader {
    /* Centres the logo child. The "Loading" caption is drawn by
       .preloader:before, which is absolutely positioned and so stays
       exactly where it was - flex does not move it. */
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader:after {
    /* Retires the Realexa PNG. display:none rather than
       background-image:none so it leaves no invisible 160x110 gap. */
    display: none;
}

.zion-logo--loading {
    /* Margin on a centred flex item shifts the visible logo up by half
       its value, clearing the "Loading" caption that sits just below
       the vertical centre. */
    margin-bottom: 70px;

    /* Same heartbeat the PNG had - keyframes live in animate.css.
       Note it animates `transform`, which is why the logo is centred
       with flexbox instead of a translate (the animation would
       overwrite a translate every frame). */
    -webkit-animation: pulse 1s infinite linear;
    animation: pulse 1s infinite linear;

    /* The house mark is sized in em, so it scales off THIS font-size,
       not the wordmark's. Setting it to 25px keeps the mark at ~0.8x
       the word's height - the same proportion as the header lockup. */
    font-size: 25px;
    gap: 12px;
}

.zion-logo--loading .zion-logo__word {
    /* Larger than the header lockup - it is the only thing on screen. */
    font-size: 42px;
}

/* Dark colour scheme: the preloader background flips to near-black,
   so the wordmark flips to white. The house mark stays copper - it
   reads well on both and keeps the brand colour present. */
.dark-layout .zion-logo--loading .zion-logo__word {
    color: #fff;
}

@media (max-width: 767.98px) {
    .zion-logo--loading {
        font-size: 19px;
    }

    .zion-logo--loading .zion-logo__word {
        font-size: 32px;
    }
}

/* ---- Footer credit line ---------------------------------------- */

.copyright-text .credit-sep {
    /* Separator between copyright and credit. Dimmed so it divides
       without competing for attention. */
    opacity: 0.4;
    margin: 0 6px;
}

.copyright-text .credit-text {
    /* Inherits the footer's colour so it stays consistent if the
       palette changes later. */
    opacity: 0.85;
}

.copyright-text .credit-text strong {
    font-weight: 600;
    opacity: 1;
}

/* On narrow screens let the credit drop to its own line instead of
   squeezing the copyright text. */
@media (max-width: 575px) {
    .copyright-text .credit-sep {
        display: none;
    }

    .copyright-text .credit-text {
        display: block;
        margin-top: 4px;
    }
}