/**
 * MCF public display shortcodes — light, restyleable defaults.
 * These sit inside Louise's Content Block templates, so styling is intentionally
 * minimal and namespaced (.mcf-*); the theme/template can override freely.
 *
 * Colour model (plan §7): components are colour-agnostic — they read
 * var(--mcf-accent). The base navy is shared; the accent is set per service by a
 * .mcf-svc-{kitchen|plumbing|electrical} wrapper class (defaults only — Louise's
 * Content-Block CSS always overrides). No fixed MCF palette, no hardcoded gold.
 */

:root {
    --mcf-navy: #002961;
    --mcf-accent: #008ca7; /* neutral default; per-service wrappers override */
}

/* Per-service accent defaults — the repeater adds the matching wrapper class. */
.mcf-svc-kitchen    { --mcf-accent: #008ca7; }
.mcf-svc-plumbing   { --mcf-accent: #ff6633; }
.mcf-svc-electrical { --mcf-accent: #64a70b; }

.mcf-section { margin: 0 0 28px; }
.mcf-section-heading {
    margin: 0 0 16px;
    color: var(--mcf-navy);
    font-weight: 700;
}
.mcf-section-footnote {
    margin: 12px 0 0;
    font-size: .85rem;
    font-style: italic;
    color: #6b7689;
}

/* Highlights / stat counters */
.mcf-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.mcf-highlight { display: flex; flex-direction: column; }
.mcf-highlight-value {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--mcf-navy);
}
.mcf-highlight-label {
    margin-top: 6px;
    font-size: .9rem;
    color: #6b7689;
}

/* Gallery */
.mcf-gallery {
    display: grid;
    gap: 12px;
}
.mcf-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcf-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcf-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Tier-2 loops: thin grid cell (ours) + optional explicit column counts. */
.mcf-loop-item { min-width: 0; }
.mcf-loop-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcf-loop-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcf-loop-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mcf-gallery-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Case study cards */
.mcf-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.mcf-pcard {
    border: 1px solid #e4e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
.mcf-pcard-media img { display: block; width: 100%; height: 200px; object-fit: cover; }
.mcf-pcard-title { margin: 14px 16px 6px; font-size: 1.1rem; color: var(--mcf-navy); }
.mcf-pcard-excerpt { margin: 0 16px 16px; color: #54607a; font-size: .92rem; }

/* Testimonials */
.mcf-quote-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.mcf-quote {
    margin: 0;
    padding: 22px 24px;
    background: #f6f8fb;
    border-left: 4px solid var(--mcf-accent);
    border-radius: 0 12px 12px 0;
}
.mcf-quote-text { margin: 0 0 12px; font-size: 1.02rem; color: #2a3550; }
.mcf-quote-cite { font-weight: 700; color: var(--mcf-navy); font-style: normal; }
.mcf-quote-loc { font-weight: 400; color: #6b7689; }

/* ── Our Story — readability (Louise review: line spacing + font sizing) ───
 * The Our Story paragraph binds via [mcf_field key="mcf_story_text"] inside a
 * vc_column_text tagged el_class="mcf-story-text". The default body size renders
 * tight; bump the size + line-height for comfortable reading. Scoped to the
 * profile page so it never leaks into other Story-styled text. Louise can still
 * override from the Content Block / theme CSS. */
.mcf-profile-page .mcf-story-text,
.mcf-story-text {
    font-size: 1.0625rem;   /* ~17px (up from the ~15px default) */
    line-height: 1.85;
    letter-spacing: .005em;
}
.mcf-story-text p { margin: 0 0 1.1em; }
.mcf-story-text p:last-child { margin-bottom: 0; }

/* ── Contact details — the values bound under each Showroom/Hours/… label ───
 * Each label heading is followed by a vc_column_text (el_class="mcf-contact-value")
 * holding the licensee's [mcf_field] value. Sit it snug under its label with a
 * little breathing room before the next label. The right-hand column holds the
 * per-licensee contact form ([mcf_contact_form] → HO-set embed). */
.mcf-contact-value {
    margin: 2px 0 16px;
    font-size: 1rem;
    line-height: 1.5;
}
.mcf-contact-value:last-child { margin-bottom: 0; }
.mcf-contact-value a { color: var(--mcf-accent); }

/* ── Single-template section visibility ───────────────────────────────────
 * The profile route sets body classes from content + the HO fallback switch.
 * Louise tags each conditional section row with mcf-sec-{section}; we collapse
 * it when the matching mcf-hide-{section} is on <body>. For Projects & Gallery,
 * mcf-src-{section}-{local|national} hides the inapplicable "More" button so
 * Louise can place both (mcf-more-local / mcf-more-national). */
.mcf-hide-projects     .mcf-sec-projects,
.mcf-hide-gallery      .mcf-sec-gallery,
.mcf-hide-designers    .mcf-sec-designers,
.mcf-hide-awards       .mcf-sec-awards,
.mcf-hide-testimonials .mcf-sec-testimonials,
.mcf-hide-whatwedo     .mcf-sec-whatwedo,
.mcf-hide-story        .mcf-sec-story { display: none !important; }
.mcf-hide-contactform  .mcf-sec-contactform {
    visibility: hidden !important;
}

/* Featured awards (up to mcf_award_slot_count()). Louise tags each award's row or
 * column with mcf-sec-award-{n} (n = 1…4, matching index 0…3); we collapse just
 * that award when it's empty — the same collapse the whole Awards section uses,
 * applied per award. Add matching pairs here if the slot count is filtered above 4. */
.mcf-hide-award-1 .mcf-sec-award-1,
.mcf-hide-award-2 .mcf-sec-award-2,
.mcf-hide-award-3 .mcf-sec-award-3,
.mcf-hide-award-4 .mcf-sec-award-4 { display: none !important; }

/* Award description: [mcf_award key="body"] keeps the licensee's line breaks
 * (nl2br), so give each break a little space — a multi-line description then reads
 * as separate lines/paragraphs instead of a wall of text. Scoped to the award rows
 * (mcf-sec-awards / mcf-sec-award-{n}), so nothing else on the profile is touched.
 * Adjust the margin here to taste.
 *
 * !important because Uncode resets `.uncode_text_column > :first-child { margin-top:0 }`
 * — and since the description starts with a text node, the FIRST <br> counts as that
 * first element child, so without this the opening line break alone lost its space. */
[class*="mcf-sec-award"] br {
    display: block;
    content: "";
    margin-top: 0.5em !important;
}

/* Space BETWEEN award bands. Each award is a full-bleed gradient row, so with no
 * gap two consecutive awards merge into one block of colour. The gap sits ABOVE
 * slots 2–4 (never above the first, never below the last), so it only ever appears
 * BETWEEN two visible awards — no stray space before the section or after it.
 * Awards are always contiguous (empty rows are dropped on save), so this yields
 * exactly one gap per pair. A hidden award's margins collapse with it, so an empty
 * award leaves no orphan gap — which a spacer element in the block could not do.
 * Tune the clamp to taste. */
.mcf-sec-award-2,
.mcf-sec-award-3,
.mcf-sec-award-4 {
    margin-top: clamp(20px, 3vw, 48px);
}

/* Contact card ("Ready to start your journey") lines. Louise tags each line —
 * the label + its [mcf_field] value — with mcf-sec-contact-{field}; we collapse
 * that line when the licensee left the field blank, so no orphan "Hours" /
 * "Areas" heading is left standing. Tag both the label and value elements (or a
 * shared wrapper) so the whole line goes with it. */
.mcf-hide-contact-address   .mcf-sec-contact-address,
.mcf-hide-contact-hours     .mcf-sec-contact-hours,
.mcf-hide-contact-christmas .mcf-sec-contact-christmas,
.mcf-hide-contact-areas     .mcf-sec-contact-areas { display: none !important; }

/* When the tagged element is an inline element WPBakery wraps (e.g. the anchor-
 * nav buttons render as <span class="btn-container"><a class="mcf-sec-…"></span>),
 * hiding the element alone leaves the wrapper's padding + inline gap behind.
 * Collapse the wrapper too when the button it holds belongs to a hidden section.
 * (:has() is supported in all current browsers.) */
.mcf-hide-projects     .btn-container:has(.mcf-sec-projects),
.mcf-hide-gallery      .btn-container:has(.mcf-sec-gallery),
.mcf-hide-designers    .btn-container:has(.mcf-sec-designers),
.mcf-hide-awards       .btn-container:has(.mcf-sec-awards),
.mcf-hide-testimonials .btn-container:has(.mcf-sec-testimonials),
.mcf-hide-contactform  .btn-container:has(.mcf-sec-contactform),
.mcf-hide-whatwedo     .btn-container:has(.mcf-sec-whatwedo),
.mcf-hide-story        .btn-container:has(.mcf-sec-story) { display: none !important; }

.mcf-src-projects-local    .mcf-sec-projects .mcf-more-national,
.mcf-src-projects-national .mcf-sec-projects .mcf-more-local,
.mcf-src-gallery-local     .mcf-sec-gallery  .mcf-more-national,
.mcf-src-gallery-national  .mcf-sec-gallery  .mcf-more-local { display: none !important; }

/* [mcf_projects_footer] / [mcf_gallery_footer] print nothing on local content, but
 * the Text element wrapping them still holds its margins. Louise tags that element
 * `mcf-fallback-note` and we collapse it whenever the section isn't national. */
.mcf-src-projects-local .mcf-sec-projects .mcf-fallback-note,
.mcf-src-gallery-local  .mcf-sec-gallery  .mcf-fallback-note { display: none !important; }

/* Designers carousel — shell is ours, the card is the item template */
.mcf-carousel { position: relative; }
.mcf-carousel-viewport { overflow: hidden; }
.mcf-carousel-track { display: flex; gap: 24px; transition: transform .4s ease; }
.mcf-carousel-item { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }
.mcf-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.mcf-carousel-prev, .mcf-carousel-next {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid #d7dde7; background: #fff; color: var(--mcf-navy);
    font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.mcf-carousel-prev:hover, .mcf-carousel-next:hover { background: var(--mcf-accent); border-color: var(--mcf-accent); color: #fff; }
.mcf-carousel-dots { display: flex; gap: 8px; }
.mcf-carousel-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d7dde7; cursor: pointer; }
.mcf-carousel-dot.is-active { background: var(--mcf-accent); }

/* Native Uncode designers carousel (Louise's Post Module) — center a lone card.
 * With 2+ designers OWL builds a scrollable carousel that already fills the row.
 * With a single designer OWL flags the carousel `.disabled` (nothing to scroll)
 * and sizes its stage to one item's width, which then sits left-aligned in the
 * full-width row. Only in that disabled state do we center the stage; scrollable
 * carousels (no `.disabled`) are left fully native, so drag/slide is preserved. */
.mcf-sec-designers .owl-carousel.disabled .owl-stage-outer {
    display: flex;
    justify-content: center;
}

/* Default designer card (used when no item_template is supplied) */
.mcf-designer-card { background: #fff; border: 1px solid #e4e8f0; border-radius: 14px; overflow: hidden; height: 100%; }
.mcf-designer-card-media img, .mcf-designer-card-photo { display: block; width: 100%; height: 240px; object-fit: cover; object-position: center top; }
.mcf-designer-card-body { padding: 18px 20px 22px; }
.mcf-designer-card-name { margin: 0 0 4px; font-size: 1.05rem; color: var(--mcf-navy); }
.mcf-designer-card-role { display: block; margin-bottom: 10px; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mcf-accent); }
.mcf-designer-card-bio { margin: 0; font-size: .9rem; color: #54607a; line-height: 1.6; }

/* ── Tier-2 item-template cards (scaffolded card blocks; restyleable) ──────
 * Default styling for the project/gallery/designer/testimonial card Content
 * Blocks. Namespaced .mcf-card*; Louise overrides via the card block or theme
 * CSS and it reflects live. */
.mcf-card { display: block; background: #fff; border-radius: 12px; overflow: hidden; text-decoration: none; height: 100%; }
.mcf-card-media { position: relative; overflow: hidden; }
.mcf-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mcf-card:hover .mcf-card-media img { transform: scale(1.04); }

/* Project + gallery = overlay tile */
.mcf-card-project, .mcf-card-gallery { position: relative; }
.mcf-card-project .mcf-card-media, .mcf-card-gallery .mcf-card-media { aspect-ratio: 4 / 3; }
.mcf-card-project .mcf-card-overlay, .mcf-card-gallery .mcf-card-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: 18px 20px; color: #fff;
    background: linear-gradient(to top, rgba(0,20,50,.78) 0%, rgba(0,20,50,.15) 55%, transparent 100%);
}
.mcf-card-gallery .mcf-card-overlay { opacity: 0; transition: opacity .25s; }
.mcf-card-gallery:hover .mcf-card-overlay { opacity: 1; }
.mcf-card-project .mcf-card-meta { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 4px; }
.mcf-card-project .mcf-card-title { margin: 0; font-size: 1.15rem; color: #fff; }
.mcf-card-gallery .mcf-card-overlay span { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Designer card */
.mcf-card-designer { border: 1px solid #e4e8f0; }
.mcf-card-designer .mcf-card-media { aspect-ratio: 1 / 1; }
.mcf-card-designer .mcf-card-body { padding: 18px 20px 22px; }
.mcf-card-name { margin: 0 0 2px; font-size: 1.05rem; color: var(--mcf-navy); }
.mcf-card-role { display: block; margin-bottom: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mcf-accent); }
.mcf-card-bio { margin: 0; font-size: .9rem; color: #54607a; line-height: 1.6; }

/* Testimonial card */
.mcf-card-testimonial { padding: 28px 26px; border: 1px solid #e4e8f0; border-top: 3px solid var(--mcf-accent); }
.mcf-card-stars { color: var(--mcf-accent); letter-spacing: 2px; margin-bottom: 12px; }
.mcf-card-quote { margin: 0 0 16px; font-style: italic; color: #2a3550; line-height: 1.7; }
.mcf-card-cite { font-style: normal; }
.mcf-card-cite strong { display: block; color: var(--mcf-navy); }
.mcf-card-cite span { font-size: .85rem; color: #6b7689; }

/* Default award list + card (used when no item_template is supplied) */
.mcf-awards { display: grid; gap: 16px; }
.mcf-awards.mcf-loop-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mcf-awards.mcf-loop-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mcf-award-card {
    display: flex; gap: 18px; align-items: flex-start;
    background: #fff; border: 1px solid #e4e8f0;
    border-left: 4px solid var(--mcf-accent);
    border-radius: 12px; padding: 20px 22px;
}
.mcf-award-card-media img, .mcf-award-card-photo { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.mcf-award-card-year { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--mcf-accent); margin-bottom: 4px; }
.mcf-award-card-title { margin: 0 0 6px; font-size: 1.1rem; color: var(--mcf-navy); }
.mcf-award-card-body-text { margin: 0; font-size: .9rem; color: #54607a; line-height: 1.6; }

@media (max-width: 900px) {
    .mcf-carousel-item { flex-basis: calc((100% - 24px) / 2); }
    .mcf-awards.mcf-loop-cols-2, .mcf-awards.mcf-loop-cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .mcf-gallery-cols-3, .mcf-gallery-cols-4,
    .mcf-loop-cols-3, .mcf-loop-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .mcf-carousel-item { flex-basis: 100%; }
}