/* =========================================================
   WordPress bridge layer
   ---------------------------------------------------------
   Two jobs only:
   1. Map WordPress menu classes onto the design's own states.
   2. Carry over the mobile header fixes that shared-chrome.js
      used to inject at runtime.
   Nothing here restyles the design. Keep it thin.
   Aimstyle — Araby Mohamed
   ========================================================= */

/* ---------- Active navigation state ---------- */
/* WordPress marks the current item; the design styles `.is-active`. */
.twa-header__nav .current-menu-item > a,
.twa-header__nav .current_page_item > a,
.twa-header__nav .current-menu-ancestor > a,
.twa-header__nav a.is-active,
.tw-top-nav .current-menu-item > a,
.tw-top-nav .current_page_item > a,
.tw-top-nav a.is-active {
    color: #fff;
}

.twa-header__nav .current-menu-item > a::after,
.twa-header__nav .current_page_item > a::after,
.twa-header__nav .current-menu-ancestor > a::after,
.twa-header__nav a.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.twa-mobile-panel__nav .current-menu-item > a,
.twa-mobile-panel__nav .current_page_item > a,
.twa-mobile-panel__nav a.is-active,
.twa-mobile-panel__nav a.is-active span,
.twa-mobile-panel__nav a.is-active strong,
.twa-mobile-panel__nav a.is-active svg,
.tw-menu-panel__nav a.is-active,
.tw-menu-panel__nav .current-menu-item > a {
    color: var(--twa-gold, #c9a66b);
}

/* ---------- Mobile header (was injected by shared-chrome.js) ---------- */
@media (max-width: 900px) {

    .twa-header,
    .twct-page .twa-header {
        position: absolute !important;
        z-index: 1001 !important;
    }

    body.twa-nav-open .twa-header,
    body.twa-menu-open .twa-header {
        position: fixed !important;
        z-index: 1001 !important;
    }

    .twa-mobile-panel {
        z-index: 1000 !important;
    }

    .twa-mobile-menu {
        position: relative !important;
        z-index: 1002 !important;
        display: grid !important;
        flex: 0 0 46px;
        place-items: center;
        width: 46px !important;
        height: 46px !important;
        gap: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .twa-mobile-menu span {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: 20px !important;
        height: 1px !important;
        margin: 0 !important;
        background: #fff !important;
        opacity: 1 !important;
        transform-origin: center !important;
        transition: transform .42s cubic-bezier(.22, 1, .36, 1), background .3s ease !important;
    }

    .twa-mobile-menu span:first-child {
        transform: translate(-50%, -4px) rotate(0) !important;
    }

    .twa-mobile-menu span:last-child {
        transform: translate(-50%, 4px) rotate(0) !important;
    }

    .twa-mobile-menu.is-active {
        border-color: var(--twa-gold, #c9a66b) !important;
        background: rgba(13, 13, 12, .72) !important;
    }

    .twa-mobile-menu.is-active span:first-child {
        transform: translate(-50%, 0) rotate(45deg) !important;
    }

    .twa-mobile-menu.is-active span:last-child {
        transform: translate(-50%, 0) rotate(-45deg) !important;
    }

    .twa-mobile-panel.is-open .twa-mobile-panel__nav a:nth-child(5) {
        transition-delay: .44s;
    }
}

/* ---------- Admin bar ----------
   WordPress pushes the whole document down with html{margin-top:32px}. This
   design is built on full-viewport sections, so that 32px turns every 100vh
   hero into a 100vh + 32px block and puts the footer strip below the fold.

   Instead: drop the document offset and let the bar overlay the top of the
   page, then move only the fixed site header out from under it. Logged out
   visitors are unaffected either way.                                      */
@media screen {

    /* `html:root` outranks core's `html{margin-top:32px!important}` on
       specificity, so this holds whatever order the sheets load in. */
    html:root {
        margin-top: 0 !important;
    }

    body.admin-bar .twa-header,
    body.admin-bar .tw-header {
        margin-top: 32px;
    }

    /* Panels that cover the screen start below the bar, not behind it. */
    body.admin-bar .twa-mobile-panel,
    body.admin-bar .tw-menu-panel {
        padding-top: 32px;
    }
}

@media screen and (max-width: 782px) {

    body.admin-bar .twa-header,
    body.admin-bar .tw-header {
        margin-top: 46px;
    }

    body.admin-bar .twa-mobile-panel,
    body.admin-bar .tw-menu-panel {
        padding-top: 46px;
    }
}

/* ---------- Accessibility: skip link ---------- */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}

.skip-link.screen-reader-text:focus {
    left: 24px;
    top: 24px;
    width: auto;
    height: auto;
    padding: 14px 22px;
    clip: auto;
    clip-path: none;
    color: #0d0d0c;
    background: var(--twa-gold, #c9a66b);
    font: 500 13px/1 "Acumin Variable Concept", system-ui, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Core block / editor alignment classes ---------- */
.alignleft {
    float: left;
    margin: .4em 2em 1.2em 0;
}

.alignright {
    float: right;
    margin: .4em 0 1.2em 2em;
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

.alignwide {
    max-width: 1320px;
    margin-inline: auto;
}

.alignfull {
    width: 100%;
    max-width: none;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption {
    margin-top: .8em;
    color: rgba(255, 255, 255, .55);
    font-size: .82rem;
    letter-spacing: .04em;
}

.sticky .entry-title::before {
    content: "★";
    margin-right: .5em;
    color: var(--twa-gold, #c9a66b);
}

img.wp-post-image,
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* ---------- ACF WYSIWYG slots ----------
   The design writes these as a single <p>. An ACF WYSIWYG field supplies its
   own <p> tags, so the element becomes a <div> wrapper. Strip the outer
   paragraph margins so the block keeps the exact height it had before. */
.twa-founders__intro > p:first-child,
.twa-values__intro > p:first-child,
.twa-process__intro > p:first-child,
.twa-belief__summary > p:first-child,
.twa-hero__intro > p:first-child {
    margin-top: 0;
}

.twa-founders__intro > p:last-child,
.twa-values__intro > p:last-child,
.twa-process__intro > p:last-child,
.twa-belief__summary > p:last-child,
.twa-hero__intro > p:last-child {
    margin-bottom: 0;
}

/* ---------- Uploaded social icons ----------
   The design draws these as inline SVG coloured with `currentColor`. An icon
   uploaded through Theme Options is an <img> instead, so it keeps whatever
   colour the file has — usually black, which disappears on a dark panel.
   `brightness(0) invert(1)` forces any source, SVG or PNG, to solid white,
   and the hover state flips it back to dark on the gold fill. */
.twa-footer__socials a img,
.twct-instagram img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: filter .3s ease;
}

.twct-instagram img {
    width: 19px;
    height: 19px;
}

.twa-footer__socials a:hover img,
.twct-instagram:hover img {
    filter: brightness(0);
}

/* ---------- Contact form status ---------- */
.twct-form__status.is-error {
    color: #e0736b;
}

/* ---------- Contact Form 7 ----------
   CF7 wraps every control in <span class="wpcf7-form-control-wrap">, which
   lands as a direct child of .twct-field and would otherwise inherit the
   label styling from `.twct-field > span`. Reset that wrapper, then give
   CF7's submit input and messages the design's own treatment. */
.twct-field > span.wpcf7-form-control-wrap {
    display: block;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* CF7 submits with <input type="submit">, the design styles <button>. */
.twct-form input[type="submit"],
.twct-form .wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0 1.35rem;
    border: 1px solid var(--twct-gold, #c9a66b);
    border-radius: 0;
    background: var(--twct-gold, #c9a66b);
    color: #0b0b0a;
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

.twct-form input[type="submit"]:hover {
    background: transparent;
    color: #fff;
}

.twct-form input[type="submit"]:disabled {
    opacity: .65;
    cursor: wait;
}

/* The response line takes the exact slot the design's .twct-form__status
   occupies — same reserved height and spacing — so the panel is the same
   height whether the built-in form or CF7 is rendering. */
/* CF7 hides this with `.wpcf7 form.init .wpcf7-response-output`, which
   outranks a plain two-class selector — hence the !important on display. */
.wpcf7 form.twct-form .wpcf7-response-output,
.twct-form .wpcf7-response-output {
    display: block !important;
    min-height: 1.25rem;
    margin: .65rem 0 0;
    padding: 0;
    border: 0;
    color: #dfc49e;
    font-size: .72rem;
    line-height: 1.4;
}

.twct-form .wpcf7-not-valid-tip {
    margin-top: .35rem;
    color: #e0736b;
    font-size: .68rem;
}

.twct-form .wpcf7-not-valid {
    border-color: rgba(224, 115, 107, .6) !important;
}

/* CF7's spinner is always in the DOM. Left in the flow it adds ~34px under
   the button and makes the panel taller than the design. Show it only while
   CF7 is actually submitting — it adds the `submitting` class to the form. */
.twct-form .wpcf7-spinner {
    display: none;
    margin: .6rem auto 0;
}

.twct-form.submitting .wpcf7-spinner {
    display: block;
}

/* CF7 prints an empty <p> when a form is embedded inside markup. */
.twct-form-panel .wpcf7 > form > p:empty {
    display: none;
}

/* ---------- Pagination ---------- */
.aimstyle-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 72px auto 0;
}

.aimstyle-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .7);
    font-size: .82rem;
    letter-spacing: .12em;
    text-decoration: none;
    transition: color .3s ease, border-color .3s ease;
}

.aimstyle-pagination .page-numbers:hover,
.aimstyle-pagination .page-numbers.current {
    color: var(--twa-gold, #c9a66b);
    border-color: var(--twa-gold, #c9a66b);
}