/**
 * 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;
}