/**
 * Mudah Developer Projects Hub — design tokens.
 *
 * Extracted directly from the Figma file via Dev Mode
 * (fileKey wAx0BkgJOdFKQQa7KcROpx, node 5430-4239), NOT eyeballed from
 * screenshots. Every value below is a published Figma variable.
 *
 * These supersede the ad-hoc values previously inlined in the page
 * templates, several of which were wrong:
 *   --primary  was #E31E24  ->  Mudah Red is #e21e30
 *   --green    was #00B050  ->  Mudah Green is #0a9b49
 *   font-family was a system stack -> the design uses Open Sans
 *
 * Keep this file the single source of truth. If a value here disagrees with
 * Figma, re-pull with get_variable_defs rather than patching a template.
 */

:root {
    /* ---- Brand ---------------------------------------------------- */
    --mlp-red:            #e21e30; /* color/red/700 Mudah Red   */
    --mlp-green:          #0a9b49; /* color/green/600 Mudah Green */
    --mlp-green-dark:     #00893d; /* color/green/700 Dark Green  */
    --mlp-blue:           #1e88e5; /* color/blue/600 Mudah Blue   */
    --mlp-blue-light:     #42a5f5; /* color/blue/400 Light Blue   */
    --mlp-yellow-100:     #feeab4; /* color/yellow/100            */

    /* ---- Surfaces -------------------------------------------------- */
    --mlp-surface-white:     #ffffff;
    --mlp-surface-off-white: #fafafa;
    --mlp-surface-gray100:   #f5f5f5;
    --mlp-surface-gray700:   #616161;

    /* ---- Text ------------------------------------------------------
       Figma expresses emphasis as black at an alpha, not as a grey.
       Kept as 8-digit hex so the alpha is preserved over any surface. */
    --mlp-text-hi-emp:   #000000de; /* 87% — headings, body      */
    --mlp-text-med-emp:  #00000099; /* 60% — secondary/captions  */
    --mlp-text-rev:      #ffffff;   /* on dark/photo backgrounds */

    /* ---- Borders --------------------------------------------------- */
    --mlp-border-subtle: #00000014; /* 8% black */

    /* ---- Buttons --------------------------------------------------- */
    --mlp-btn-pri:       #e21e30;
    --mlp-btn-sec:       #9e9e9e;
    --mlp-btn-sec-text:  #000000de;

    /* ---- Spacing scale ---------------------------------------------
       The design only uses these steps. Do not invent intermediate
       values — if a gap looks like 10px, it is 8 or 12. */
    --mlp-space-0:  0px;
    --mlp-space-4:  4px;
    --mlp-space-8:  8px;
    --mlp-space-12: 12px;
    --mlp-space-16: 16px;
    --mlp-space-20: 20px;
    --mlp-space-24: 24px;
    --mlp-space-48: 48px;
    --mlp-space-80: 80px;

    /* ---- Typography ------------------------------------------------
       Material/* styles from the Figma type system. */
    --mlp-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --mlp-h6-size:        20px;  /* Material/H6 desktop, SemiBold */
    --mlp-h6-weight:      600;
    --mlp-h6-line:        28px;

    --mlp-body2-size:     14px;  /* Material/Body 2, Regular */
    --mlp-body2-weight:   400;
    --mlp-body2-line:     22px;

    --mlp-button-size:    14px;  /* Material/Button, SemiBold */
    --mlp-button-weight:  600;

    --mlp-caption-size:   12px;  /* Material/Caption, Regular */
    --mlp-caption-weight: 400;
    --mlp-caption-line:   16px;

    /* ---- Elevation -------------------------------------------------- */
    --mlp-shadow-2dp: 0 2px 6px #0000001a;
    --mlp-shadow-8dp: 0 8px 8px #00000026;
}

/* Base type — applies the design's font to everything the plugin renders.
   Scoped to .mlp-root so it can't leak into wp-admin or the parent theme. */
.mlp-root {
    font-family: var(--mlp-font);
    font-size: var(--mlp-body2-size);
    line-height: var(--mlp-body2-line);
    color: var(--mlp-text-hi-emp);
    background: var(--mlp-surface-white);
}

.mlp-root h1,
.mlp-root h2,
.mlp-root h3,
.mlp-root h4,
.mlp-root h5,
.mlp-root h6 {
    font-family: var(--mlp-font);
    color: var(--mlp-text-hi-emp);
}

.mlp-root h6,
.mlp-root .mlp-h6 {
    font-size: var(--mlp-h6-size);
    font-weight: var(--mlp-h6-weight);
    line-height: var(--mlp-h6-line);
}

/* Visually hidden but present for screen readers and search engines.
   Standard clip technique -- NOT display:none, which removes it from both. */
.mlp-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Breadcrumb ---------------------------------------------------
   Shared by all three page types. mlp_breadcrumb_html() emits a
   <nav><ol><li> so the visible trail is semantic and mirrors the
   BreadcrumbList JSON-LD exactly. Separator is a CSS ::after so it is
   never read out by a screen reader. */
.mlp-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mlp-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--mlp-caption-size);
    line-height: var(--mlp-caption-line);
}

.mlp-breadcrumb li {
    display: flex;
    align-items: center;
    color: var(--mlp-text-med-emp);
}

.mlp-breadcrumb li + li::before {
    content: "/";
    margin: 0 var(--mlp-space-8) 0 var(--mlp-space-4);
    color: var(--mlp-text-med-emp);
    opacity: .6;
}

.mlp-breadcrumb a {
    color: var(--mlp-red);
    text-decoration: none;
}

.mlp-breadcrumb a:hover,
.mlp-breadcrumb a:focus-visible {
    text-decoration: underline;
}

.mlp-breadcrumb [aria-current="page"] {
    color: var(--mlp-text-med-emp);
}

.mlp-root .mlp-caption {
    font-size: var(--mlp-caption-size);
    font-weight: var(--mlp-caption-weight);
    line-height: var(--mlp-caption-line);
    color: var(--mlp-text-med-emp);
}