/* =========================================================
   Clean Button — Theme-driven tokens
   Uses theme.json preset variables when available:
   var(--wp--preset--color--<slug>)
   ========================================================= */


/* --- Material Symbols (Google) --- */
.material-symbols-outlined{
    font-family: "Material Symbols Outlined";
    font-weight: 300;
    font-style: normal;
    font-size: 1.15em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

:root {
    /* Shape + typography */
    --cbtn-radius: 999px;
    --cbtn-px: 28px;
    --cbtn-py: 14px;

    /* Icon-only sizing */
    --cbtn-icon-size: 46px;
    --cbtn-icon-pad: 12px;
    --cbtn-font: 600 16px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* Optional borders/focus */
    --cbtn-border: rgba(0, 0, 0, 0.10);
    --cbtn-focus: rgba(0, 0, 0, 0.25);

    /* === Map to THEME PRESETS (slugs must exist in theme.json) ===
     Primary:  bg rosa/base, text rosa/600
               hover bg rosa/400, hover text rosa/100
     Secondary:bg moos/300, text moos/600
               hover bg moos/500, hover text moos/100
     Tertiary: bg white, text moos/500
               hover bg moos/100, hover text moos/500
  */

    /* PRIMARY */
    --cbtn-primary-bg: var(--wp--preset--color--rosa-base, #d6a5a8);
    --cbtn-primary-fg: var(--wp--preset--color--rosa-600, #3a2b2c);
    --cbtn-primary-hover-bg: var(--wp--preset--color--rosa-400, #9a6a6f);
    --cbtn-primary-hover-fg: var(--wp--preset--color--rosa-100, #ffffff);

    /* SECONDARY */
    --cbtn-secondary-bg: var(--wp--preset--color--moos-300, #b7d0c8);
    --cbtn-secondary-fg: var(--wp--preset--color--moos-600, #2c3b36);
    --cbtn-secondary-hover-bg: var(--wp--preset--color--moos-500, #506b63);
    --cbtn-secondary-hover-fg: var(--wp--preset--color--moos-100, #dfece7);

    /* TERTIARY */
    --cbtn-tertiary-bg: var(--wp--preset--color--white, #ffffff);
    --cbtn-tertiary-fg: var(--wp--preset--color--moos-500, #506b63);
    --cbtn-tertiary-hover-bg: var(--wp--preset--color--moos-100, #dfece7);
    --cbtn-tertiary-hover-fg: var(--wp--preset--color--moos-500, #506b63);
}

.cbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: var(--cbtn-py) var(--cbtn-px);
    border-radius: var(--cbtn-radius);
    font: var(--cbtn-font);
    text-decoration: none;

    border: 1px solid transparent;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}

.cbtn:focus-visible {
    outline: 3px solid var(--cbtn-focus);
    outline-offset: 2px;
}

/* PRIMARY */
.cbtn--primary {
    background: var(--cbtn-primary-bg);
    color: var(--cbtn-primary-fg);
}

.cbtn--primary:hover {
    background: var(--cbtn-primary-hover-bg);
    color: var(--cbtn-primary-hover-fg);
}

/* SECONDARY */
.cbtn--secondary {
    background: var(--cbtn-secondary-bg);
    color: var(--cbtn-secondary-fg);
}

.cbtn--secondary:hover {
    background: var(--cbtn-secondary-hover-bg);
    color: var(--cbtn-secondary-hover-fg);
}

/* TERTIARY */
.cbtn--tertiary {
    background: var(--cbtn-tertiary-bg);
    color: var(--cbtn-tertiary-fg);
    border-color: var(--cbtn-border);
}

.cbtn--tertiary:hover {
    background: var(--cbtn-tertiary-hover-bg);
    color: var(--cbtn-tertiary-hover-fg);
    border-color: transparent;
}

/* LINK (plain text, no padding) */
.cbtn--link {
    background: transparent;
    color: var(--wp--preset--color--rosa-400, #a86f75);
    border: 0;
    border-radius: 0;
    padding: 0;
}

.cbtn--link:hover {
    background: transparent;
    color: var(--wp--preset--color--rosa-600, #451c20);
    text-decoration: underline;
}


/* --- Icon layout --- */
.cbtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cbtn__icon{
    font-size: 24px;
    line-height: 1;
    color: inherit;
}

.cbtn .material-symbols-outlined{
    font-size: 24px;
}

.cbtn__icon--svg{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cbtn__icon-svg-img{
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.cbtn--icon-left .cbtn__icon{ order: 0; }
.cbtn--icon-left .cbtn__label{ order: 1; }
.cbtn--icon-right .cbtn__label{ order: 0; }
.cbtn--icon-right .cbtn__icon{ order: 1; }

/* --- Icon only --- */
.cbtn--icon-only{
    width: var(--cbtn-icon-size);
    height: var(--cbtn-icon-size);
    padding: var(--cbtn-icon-pad);
    min-width: 0;
}

.cbtn__sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}