/* =========================================================================
   FX Shortcodes — block-style layout primitives
   ========================================================================= */

/* ---- wpautop cleanup --------------------------------------------------
 * wpautop runs after this plugin's parser and frequently wraps stray
 * whitespace between rendered block siblings in <p></p>, and splits an
 * <a> that contains block-level children into a leading link plus a
 * trailing empty <p><a></a></p>. Hide both inside any FX container. */
.fx-cover p:empty,
.fx-group p:empty,
.fx-columns p:empty,
.fx-column p:empty,
.fx-card p:empty,
.fx-media-text p:empty,
.fx-details p:empty,
.fx-cover p:has(> a:empty:only-child),
.fx-group p:has(> a:empty:only-child),
.fx-columns p:has(> a:empty:only-child),
.fx-column p:has(> a:empty:only-child),
.fx-card p:has(> a:empty:only-child),
.fx-media-text p:has(> a:empty:only-child),
.fx-details p:has(> a:empty:only-child) {
    display: none;
}

/* ---- Width / alignment helpers (mirror WP core) ------------------------ */
.fx-cover.alignfull,
.fx-group.alignfull,
.fx-columns.alignfull,
.fx-card.alignfull,
.fx-media-text.alignfull,
.fx-details.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.fx-cover.alignwide,
.fx-group.alignwide,
.fx-columns.alignwide,
.fx-card.alignwide,
.fx-media-text.alignwide,
.fx-details.alignwide {
    max-width: min(1400px, 90vw);
    margin-left: auto;
    margin-right: auto;
}

.fx-align-left {
    text-align: left;
}
.fx-align-center {
    text-align: center;
}
.fx-align-right {
    text-align: right;
}

.fx-justify-start {
    justify-content: flex-start;
}
.fx-justify-center {
    justify-content: center;
}
.fx-justify-end {
    justify-content: flex-end;
}
.fx-justify-space-between {
    justify-content: space-between;
}
.fx-justify-space-around {
    justify-content: space-around;
}

.fx-valign-top {
    align-items: flex-start;
    align-self: flex-start;
}
.fx-valign-center {
    align-items: center;
    align-self: center;
}
.fx-valign-bottom {
    align-items: flex-end;
    align-self: flex-end;
}

/* ---- Cover ------------------------------------------------------------- */
.fx-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem;
    overflow: hidden;
    box-sizing: border-box;
}

.fx-cover__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fx-cover--parallax .fx-cover__bg {
    background-attachment: fixed;
}

.fx-cover__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fx-cover__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
}

.fx-cover.fx-valign-top {
    align-items: flex-start;
}
.fx-cover.fx-valign-center {
    align-items: center;
}
.fx-cover.fx-valign-bottom {
    align-items: flex-end;
}

/* ---- Group ------------------------------------------------------------- */
.fx-group {
    box-sizing: border-box;
}

.fx-group--flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.fx-group--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1rem;
}

/* ---- Columns ----------------------------------------------------------- */
.fx-columns {
    display: grid;
    grid-template-columns: repeat(var(--fx-columns, 2), minmax(0, 1fr));
    gap: 1rem;
    box-sizing: border-box;
}

.fx-column {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 781px) {
    .fx-columns--stack {
        grid-template-columns: 1fr;
    }
}

/* ---- Details / Accordion ---------------------------------------------- */
.fx-details {
    border: 1px solid currentColor;
    border-color: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 0;
    box-sizing: border-box;
}

.fx-details__summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fx-details__summary::-webkit-details-marker {
    display: none;
}

.fx-details__summary::after {
    content: "+";
    font-size: 1.25em;
    line-height: 1;
    margin-left: 1rem;
    transition: transform 0.2s ease;
}

.fx-details[open] > .fx-details__summary::after {
    content: "\2212"; /* − */
}

.fx-details__content {
    padding: 0 1rem 1rem;
}

/* ---- Media & Text ----------------------------------------------------- */
.fx-media-text {
    display: grid;
    /* 1fr + 1fr (default) splits space after gap; 50% + 1fr was uneven in practice. */
    grid-template-columns: minmax(0, var(--fx-media-width, 1fr)) minmax(0, var(--fx-text-width, 1fr));
    gap: 2rem;
    align-items: center;
    box-sizing: border-box;
}

.fx-media-text--right {
    grid-template-columns: minmax(0, var(--fx-text-width, 1fr)) minmax(0, var(--fx-media-width, 1fr));
}

.fx-media-text__media {
    min-width: 0;
}

.fx-media-text__media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.fx-media-text__text {
    min-width: 0;
}

/* Crop image to fill: image stretches to match the text column height,
   like WordPress' "Crop image to fill" toggle on the Media & Text block.
   The wrapper is position: relative + min-height so the absolutely-positioned
   <img> has a definite box to fill — `height: 100%` on the img alone is
   unreliable when the grid track is sized by the image's intrinsic height. */
.fx-media-text--crop > .fx-media-text__media {
    align-self: stretch;
    position: relative;
    height: 100%;
    min-height: 250px;
    margin: 0;
    overflow: hidden;
}

.fx-media-text--crop > .fx-media-text__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 781px) {
    .fx-media-text--stack {
        grid-template-columns: 1fr;
    }
}

/* ---- Button -----------------------------------------------------------
 * Color is driven by two CSS custom properties:
 *   --fx-button-bg     base background / accent color
 *   --fx-button-color  text color shown on the filled state
 * Hover is computed with color-mix() in oklch — works for any custom color
 * the user sets via the shortcode's background-color / color attributes.
 * Adjust the strength of the hover darkening with --fx-button-darken.
 * ----------------------------------------------------------------------- */
.fx-button {
    --fx-button-bg: #2271b1;
    --fx-button-color: #ffffff;
    --fx-button-darken: 15%;

    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    border: 2px solid transparent;
    cursor: pointer;
    background-color: var(--fx-button-bg);
    color: var(--fx-button-color);
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.fx-button:hover,
.fx-button:focus {
    background-color: color-mix(
        in oklch,
        var(--fx-button-bg),
        black var(--fx-button-darken)
    );
    color: var(--fx-button-color);
}

.fx-button--outline {
    background-color: transparent;
    color: var(--fx-button-bg);
    border-color: currentColor;
}

.fx-button--outline:hover,
.fx-button--outline:focus {
    background-color: color-mix(
        in oklch,
        var(--fx-button-bg),
        black var(--fx-button-darken)
    );
    color: var(--fx-button-color);
    border-color: color-mix(
        in oklch,
        var(--fx-button-bg),
        black var(--fx-button-darken)
    );
}

.fx-button--text {
    background-color: transparent;
    color: var(--fx-button-bg);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.fx-button--text:hover,
.fx-button--text:focus {
    background-color: transparent;
    color: color-mix(
        in oklch,
        var(--fx-button-bg),
        black var(--fx-button-darken)
    );
    text-decoration: underline;
}

.fx-button--small {
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
}
.fx-button--large {
    padding: 0.9rem 1.8rem;
    font-size: 1.125rem;
}

/* ---- Card ------------------------------------------------------------- */
.fx-card {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.fx-card__link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.fx-card__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.fx-card__title {
    margin: 1rem 1rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.fx-card__body {
    padding: 0 1rem 1rem;
    flex: 1;
}

/* ---- Spacer ----------------------------------------------------------- */
.fx-spacer {
    display: block;
    pointer-events: none;
}

.fx-spacer--horizontal {
    display: inline-block;
    vertical-align: middle;
}

/* ---- Separator -------------------------------------------------------- */
.fx-separator {
    border: 0;
    border-top: 1px solid currentColor;
    width: 6rem;
    max-width: 100%;
    margin: 2rem auto;
    color: rgba(0, 0, 0, 0.25);
    height: 0;
    background: transparent;
    opacity: 1;
}

.fx-separator--align-left {
    margin-left: 0;
    margin-right: auto;
}
.fx-separator--align-right {
    margin-left: auto;
    margin-right: 0;
}

.fx-separator--wide {
    width: 100%;
}

.fx-separator--double {
    border-top-style: double;
    border-top-width: 3px;
    height: 3px;
}

.fx-separator--dashed {
    border-top-style: dashed;
}

.fx-separator--dots {
    border: 0;
    height: 0.5rem;
    width: 9rem;
    background-image: radial-gradient(
        circle,
        currentColor 30%,
        transparent 32%
    );
    background-size: 1.5rem 0.5rem;
    background-repeat: repeat-x;
    background-position: center;
}

/* ---- Decorative line ( type="line" ) ---------------------------------
 * Three-element structure:
 *   .fx-line                 outer, holds variant modifier
 *   .fx-line__layout         inline padding + flex container for alignment
 *   .fx-line__inner          the painted line; currentColor drives variants
 * ---------------------------------------------------------------------- */
.fx-line {
    display: block;
    box-sizing: border-box;
}

.fx-line__layout {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.fx-line__inner {
    box-sizing: border-box;
}

.fx-line--striped .fx-line__inner {
    background-image: linear-gradient(
        -45deg,
        transparent 22.5%,
        currentColor 22.5%,
        currentColor 27.5%,
        transparent 27.5%,
        transparent 47.5%,
        currentColor 47.5%,
        currentColor 52.5%,
        transparent 52.5%,
        transparent 72.5%,
        currentColor 72.5%,
        currentColor 77.5%,
        transparent 77.5%,
        transparent
    );
    background-position: 0.3rem 0;
    background-size: 1rem 1rem;
    border: none;
    image-rendering: pixelated;
}

.fx-line--dotted .fx-line__inner {
    background: radial-gradient(
        circle at center,
        currentColor 2px,
        transparent 0
    );
    background-size: 12px 12px;
    background-repeat: round;
    image-rendering: auto;
}

.fx-line--shade .fx-line__inner {
    position: relative;
    background: radial-gradient(
        ellipse farthest-side at top center,
        rgba(0, 0, 0, 0.08),
        transparent
    );
}

.fx-line--shade .fx-line__inner::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.02),
        transparent
    );
}

/* -------------------------------------------------------------------------
 * Sticky note
 * ------------------------------------------------------------------------- */

.fx-sticky {
    position: relative;
    display: block;
    box-sizing: border-box;
}

.fx-sticky__inner {
    display: block;
}

.fx-sticky--shadow {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------------------------------------------
 * Demo page helpers (paste docs/SHORTCODE-DEMOS.txt fragment in post content)
 * ------------------------------------------------------------------------- */

.fx-demos-explainer {
    margin-block-start: 1rem;
}

.fx-demo-output {
    clear: both;
    margin-block: 0.75rem 1.25rem;
}