/**
 * MCF — RML profile styles (accreditation panel).
 *
 * The panel is ONE element now: a Text element in the mcf-accreditation-panel
 * column holding [mcf_accreditation] (mcf-rml.php), which prints the eyebrow,
 * the "?" chip and only the badges the member actually holds. The row centres
 * whatever it's given, so one, two and three badges all sit correctly with no
 * per-count variants — see the long note above rml_sc_accreditation().
 *
 * Everything here is layout only. Colour and font are deliberately inherited
 * from the Text element, so the panel keeps being styled in WPBakery.
 */

.rml-acc {
    --rml-acc-size: 88px; /* overridden inline by the shortcode's size/gap atts */
    --rml-acc-gap: 18px;
}

.rml-acc__label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.7em;
}

/*
 * The badge row. align-items:flex-end keeps the DESIGN / BUILD / MAINTAIN
 * wordmarks baked into the PNGs sitting on one line.
 */
.rml-acc__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: var(--rml-acc-gap);
}

/*
 * Badges SHRINK to fit rather than wrap. The panel is a third of the hero on
 * desktop and full width on a phone, so a fixed width either overflows or wraps
 * 2 + 1 — which reads as a mistake rather than a layout. flex-shrink with
 * min-width:0 lets them scale down together, so any badge count fits any panel
 * width with no per-size breakpoint. The shortcode's size att is the maximum.
 *
 * (A breakpoint on --rml-acc-size would NOT work: the shortcode sets that
 * variable inline, and an inline style beats a stylesheet rule whatever the
 * media query says.)
 */
.rml-acc__img {
    display: block;
    flex: 0 1 auto;
    width: var(--rml-acc-size);
    min-width: 0;
    height: auto;
}

.rml-acc--left  .rml-acc__label,
.rml-acc--left  .rml-acc__row  { justify-content: flex-start; }
.rml-acc--right .rml-acc__label,
.rml-acc--right .rml-acc__row  { justify-content: flex-end; }

/* Phones: tighten the spacing so the shrinking badges keep as much width as
   possible. The sizes themselves are handled by the shrink rule above. */
@media (max-width: 767px) {
    .rml-acc__row {
        gap: 12px;
    }
}

/* No accreditation at all → hide the whole panel (the shortcode prints nothing,
   but the column keeps its padding and border otherwise). */
body.mcf-profile-page.mcf-acc-none .mcf-accreditation-panel {
    display: none !important;
}

/*
 * LEGACY — the previous build, kept so an environment whose block still has the
 * three mcf-badge-* image columns keeps rendering correctly until it's migrated.
 * Both rules are inert once the block uses [mcf_accreditation]. Safe to delete
 * when every environment is on the shortcode.
 *
 * 1. Uncode forces `.row-inner{height:100%}` on every row inside an equal-height
 *    column. The old panel held TWO rows (heading + badges), so they stacked to
 *    ~200% and pushed the badges below the card — this reset them to content
 *    height. Kept because it's harmless and still applies to any inner row.
 * 2. Unheld badges were hidden with visibility, NOT display: removing a column
 *    made Uncode redistribute its width and inflate the survivors. That's also
 *    why a lone badge sat off to one side — the empty slots stayed.
 */
body.mcf-profile-page .mcf-accreditation-panel .row-inner {
    height: auto !important;
}
body.mcf-profile-page:not(.mcf-acc-design)   .mcf-badge-design,
body.mcf-profile-page:not(.mcf-acc-build)    .mcf-badge-build,
body.mcf-profile-page:not(.mcf-acc-maintain) .mcf-badge-maintain {
    visibility: hidden;
}

/*
 * The "?" help chip after the ACCREDITATION label — opens the Accreditation
 * Explained popup (Popup Maker click trigger bound to .rml-acc-help). Inherits
 * the label's colour (currentColor) so it reads on whatever the panel sits on.
 *
 * It's a real <button>, so the first block is an appearance reset: the theme
 * styles buttons as green pills, which is not what a 1em chip wants.
 */
.rml-acc-help {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-left: .8em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .72em;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s ease;
}
.rml-acc-help:hover {
    opacity: 1;
}
/*
 * Keyboard focus keeps a visible ring — the chip is the only way into the
 * explainer, so it must be reachable without a mouse. :focus-visible means
 * mouse users don't see it.
 */
.rml-acc-help:focus-visible {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/*
 * NOTE: the accreditation help popup itself is styled by Popup Maker (its theme
 * + content editor), so Head Office / Louise can adjust its look and copy from
 * the Popup Maker UI. We deliberately DON'T style the popup here — only the "?"
 * trigger chip above.
 */

/*
 * Profile sub-menu hover (Lou: "text = white and have an underline").
 *
 * The sub-menu is the green bar under the hero — a row of inline buttons
 * (Projects / Awards / Our Process / Gallery / Who we are / Enquire / Call /
 * Our Website). The buttons carry the SAME palette colour as the bar they sit
 * on, so Uncode's generated hover rule
 *
 *   .btn-color-123737:not(.btn-flat):not(.btn-hover-nobg):not(.icon-animated)
 *       :not(.btn-text-skin):hover { color: #48833a !important }
 *
 * repaints the label in the bar's own green — green on green, i.e. the item
 * vanishes on hover. We pin it back to white and add the underline.
 *
 * SPECIFICITY: Uncode's rule is (0,6,0) + !important, so an override has to beat
 * six classes — hence the .btn-container / .custom-link / .btn chain rather than
 * a shorter selector. Keep all three states: Uncode colours :focus and :active
 * too, so overriding :hover alone would still lose the label to a click or to
 * keyboard focus.
 *
 * SCOPE: .mcf-profile-submenu is the intended hook — Louise adds it as the row's
 * Extra Class. .style-color-123737-bg is the interim structural match (the green
 * bar) so the fix holds until that class is in place; it can be dropped from the
 * selector once the Extra Class is on the row.
 *
 * ...but .style-color-123737-bg is a whole ROW, and the "Ready to Start Your
 * Journey?" card is a white panel INSIDE that green row — so the interim match
 * also caught the card's "Our Website" button and painted its label white on
 * white, i.e. the button vanished on hover (found in review, 3 Aug). Forcing a
 * colour is only right where the background is the green bar itself.
 *
 * `.uncell:not(.has-bg)` is the boundary: Uncode puts .has-bg on the cell that
 * carries its own background, so the card's cell is excluded and the sub-menu's
 * plain cell is not. Excluding rather than overriding matters — the card button
 * goes back to Uncode's OWN hover colour instead of a second hex pinned here
 * that would drift the day the palette changes.
 */
body.mcf-profile-page :is(.mcf-profile-submenu, .style-color-123737-bg)
    .uncell:not(.has-bg) .btn-container a.custom-link.btn:is(:hover, :focus, :active) {
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: .25em;
}

/*
 * ADJ-39 — Phone / Facebook / Instagram in that sub-menu are Icon elements
 * (WPBakery "Icon", Extra Class mcf-submenu-icon), not buttons: Louise wanted
 * them wordless and bigger, and the Icon element has a native size control
 * where a Button has none. Everything else is unchanged — the [mcf_*_url]
 * resolvers already treat vc_icon exactly like vc_button, so the links still
 * resolve, force a new tab and disappear when the member hasn't given one.
 *
 * Uncode gives .btn-container and .icon-box DIFFERENT baselines
 * (vertical-align: bottom on a 45px button vs a 30px icon box), so out of the
 * box the icons sit flush with the bottom of the buttons and read ~8px low.
 * Putting BOTH on vertical-align: middle centres them against the same axis,
 * which holds whatever icon size Louise picks — a padding nudge would not.
 */
body.mcf-profile-page :is(.mcf-profile-submenu, .style-color-123737-bg)
    :is(.btn-container.btn-inline, .icon-box.icon-inline) {
    vertical-align: middle;
}

/* Icons can't take the label underline the text items get on hover, so they
   dim instead — same "something happened" cue, no colour change on the bar. */
body.mcf-profile-page .mcf-submenu-icon a {
    transition: opacity .15s ease;
}
body.mcf-profile-page .mcf-submenu-icon a:is(:hover, :focus, :active) {
    opacity: .72;
}
body.mcf-profile-page .mcf-submenu-icon a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ── ADJ-45 — contact form embed section ──────────────────────────────────
 * The framework's shared rule (mcf-public.css) only makes a hidden contact
 * form INVISIBLE, which on MasterCraft keeps a right-hand column from
 * collapsing next to the contact details. RML's contact form is a full row of
 * its own near the foot of block 148, so an invisible row would leave a tall
 * empty gap above the footer. The ticket asks for "no Contact section" when the
 * embed is empty, so collapse the row outright.
 * Louise tags that row (and only that row) with Extra Class mcf-sec-contactform;
 * mcf_profile_body_class() puts mcf-hide-contactform on <body> whenever the
 * feature is off or this member has no embed. */
body.mcf-profile-page.mcf-hide-contactform .mcf-sec-contactform {
    display: none !important;
}

/* The Zoho iframe is width="100%" already; this just stops a stray horizontal
   scrollbar if Head Office pastes a fixed pixel width. */
.mcf-contact-form iframe {
    max-width: 100%;
    border: 0;
}

/* ── Mobile profile menu — icon-only collapsible toggle ────────────────────
 * The mobile-only nav row in block 148 (Extra Class member-profile-nav) is a
 * Menu Block on "Profile Mobile Menu" with Collapsible = Always. Uncode's
 * Collapsible is a per-parent accordion, not a whole-menu hamburger: the icon
 * and the toggle only exist on a menu item that HAS children
 * (wp-bootstrap-navwalker.php, $has_children && $is_accordion). So the nine
 * items now sit under one wrapper item, "Menu", tagged mcf-mobile-menu-toggle,
 * and these rules make that wrapper read as the icon alone. */

/* menu_layout="2,2,2" makes the root <ul> a two-column grid, and it now holds a
   single top-level <li>. Without this the toggle — and the sub-menu nested
   inside it — would be penned into the left-hand column at half bar width. */
body.mcf-profile-page .member-profile-nav .unmenu-block > li.mcf-mobile-menu-toggle {
    grid-column: 1 / -1;
}

/* Icon only, per Louise. Clipped rather than display:none so the control keeps
   an accessible name for screen readers and voice control — the icon is a
   wordless <i>, so hiding the label outright would leave it unnamed. */
body.mcf-profile-page .member-profile-nav .mcf-mobile-menu-toggle > .unmenu-title > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Uncode puts pointer-events:none on .unmenu-title and re-enables it ONLY on
   the label <span>, so out of the box the icon is never a hit target — it just
   rides along with a click on the text. menuSystem.js binds the toggle to
   .unmenu-title itself, so clipping the label removes the one clickable thing
   in the row and the icon has to take the hit target over. Without this the
   menu renders correctly and does nothing when tapped. */
body.mcf-profile-page .member-profile-nav .mcf-mobile-menu-toggle > .unmenu-title > .collapsible-icon-wrapper {
    pointer-events: auto;
    cursor: pointer;
}