/* ===========================================================================
   Site overrides — loaded after style.css.
   Keep project-specific changes here so the vendor theme stylesheet stays
   untouched and upgradable.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Brand lockup
   The old header used a PNG with the name and job title baked into the pixels,
   which meant the title could not be changed or read by search engines and
   screen readers. It is now real text.

   Header and mobile menu: name + role only, no photo.
   Footer: stacked variant, keeps the avatar.
   ------------------------------------------------------------------------- */
/* The theme ships `.logo a { display: inline-block }` at specificity (0,1,1),
   so a bare `.brand` would lose. These selectors clear it without !important. */
.brand,
a.brand,
span.brand,
.logo a.brand,
.logo span.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    line-height: 1.2;
}

.brand:hover,
.brand:focus {
    text-decoration: none;
}

.brand-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .04);
    /* Subtle ring so the circle reads as deliberate against either theme. */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
    transition: box-shadow .3s ease, transform .3s ease;
}

.brand:hover .brand-avatar {
    box-shadow: 0 0 0 2px var(--color-primary, #ff014f);
    transform: translateY(-1px);
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brand-name {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--color-white, #ffffff);
    white-space: nowrap;
    transition: color .3s ease;
}

.brand:hover .brand-name {
    color: var(--color-primary, #ff014f);
}

.brand-role {
    font-family: var(--font-primary, 'Poppins', sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-body, #878e99);
    white-space: nowrap;
}

/* The header logo column is `col-lg-auto` (was col-lg-2, too narrow for the
   brand lockup at the 992px breakpoint). Stop it collapsing under the text. */
.header-wrapper .header-left {
    flex-basis: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Keyboard focus must stay visible — the theme strips outlines globally. */
.brand:focus-visible {
    outline: 2px solid var(--color-primary, #ff014f);
    outline-offset: 4px;
    border-radius: 6px;
}

/* Footer variant: photo above the text, centred. */
.brand--stacked,
span.brand--stacked,
.logo span.brand--stacked {
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.brand--stacked .brand-avatar {
    width: 90px;
    height: 90px;
    flex-basis: 90px;
}

.brand--stacked .brand-name {
    font-size: 24px;
}

/* Light ("white version") theme, if it is ever switched on. */
.white-version .brand-name {
    color: var(--color-heading-wv, #191919);
}

.white-version .brand-avatar {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .08);
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .brand-name {
        font-size: 17px;
    }

    .brand-role {
        font-size: 9px;
        letter-spacing: 1px;
    }

    /* Footer avatar only — the header and mobile menu are text-only. */
    .brand--stacked .brand-avatar {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }
}

/* ---------------------------------------------------------------------------
   Portfolio "show all" toggle
   Only the first five projects render on load; the rest stay in the DOM but
   hidden, so they are still crawlable and linkable.
   ------------------------------------------------------------------------- */
.portfolio-more {
    display: none;
}

.portfolio-grid-expanded .portfolio-more {
    display: block;
}

.portfolio-toggle {
    cursor: pointer;
}

/* The theme's form reset sets `input, button, select, textarea { width: 100% }`,
   which stretches this button across the whole row. .rn-btn is written for
   anchors, so the border needs restating too. */
button.rn-btn.portfolio-toggle {
    width: auto;
    max-width: 100%;
    background: transparent;
    border: 2px solid var(--color-primary, #ff014f);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.portfolio-toggle svg,
.portfolio-toggle i {
    transition: transform .3s ease;
}

.portfolio-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Anyone who prefers reduced motion should not get the AOS reveal on expand. */
@media (prefers-reduced-motion: reduce) {
    .portfolio-more {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Contact form
   ------------------------------------------------------------------------- */

/* Honeypot field — must stay in the DOM for bots but never be shown or
   focusable for people. */
.rwt-contact-form .d-none,
.rnt-contact-form .d-none {
    display: none !important;
}

.error-msg p {
    color: var(--color-primary, #ff014f);
    margin-top: 15px;
    margin-bottom: 0;
}

.success-msg p {
    color: #3EB75E;
    margin-top: 15px;
    margin-bottom: 0;
}