/* =========================================================
   FOUNDAM FRAMEWORK v0.1
   GLOBAL PRIMITIVES
   ========================================================= */


/* -------------------------
   Base
   ------------------------- */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: var(--fm-font-sans);
    color: var(--fm-color-text);
    background: var(--fm-color-bg);
}


/* -------------------------
   Containers
   ------------------------- */

.fm-container {
    width: min(
        calc(100% - (var(--fm-space-gutter) * 2)),
        var(--fm-container-wide)
    );

    margin-inline: auto;
}

.fm-container--reading {
    max-width: var(--fm-container-reading);
}

.fm-container--content {
    max-width: var(--fm-container-content);
}

.fm-container--max {
    max-width: var(--fm-container-max);
}


/* -------------------------
   Sections
   ------------------------- */

.fm-section {
    padding-block: var(--fm-space-section);
}

.fm-section--large {
    padding-block: var(--fm-space-section-large);
}

.fm-section--small {
    padding-block: var(--fm-space-section-small);
}


/* -------------------------
   Typography helpers
   ------------------------- */

.fm-display {
    margin: 0;

    font-family: var(--fm-font-sans);
    font-size: var(--fm-text-display);
    font-weight: var(--fm-weight-medium);

    line-height: var(--fm-leading-tight);
    letter-spacing: var(--fm-tracking-display);
}

.fm-heading {
    margin: 0;

    font-family: var(--fm-font-sans);
    font-size: var(--fm-text-h2);
    font-weight: var(--fm-weight-medium);

    line-height: var(--fm-leading-heading);
    letter-spacing: var(--fm-tracking-heading);
}

.fm-heading--small {
    font-size: var(--fm-text-h3);
}

.fm-editorial {
    font-family: var(--fm-font-serif);
    font-weight: var(--fm-weight-regular);
    font-style: italic;
}

.fm-lead {
    font-size: var(--fm-text-lg);
    line-height: var(--fm-leading-body);
}

.fm-eyebrow {
    margin: 0 0 var(--fm-space-5);

    font-size: var(--fm-text-xs);
    font-weight: var(--fm-weight-bold);

    line-height: 1;
    letter-spacing: var(--fm-tracking-label);

    text-transform: uppercase;
}


/* -------------------------
   Links
   ------------------------- */

.fm-text-link {
    display: inline-flex;
    align-items: center;

    gap: var(--fm-space-3);

    color: inherit;

    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);

    text-decoration: none;
}

.fm-text-link span {
    transition: transform 0.2s ease;
}

.fm-text-link:hover span {
    transform: translateX(4px);
}


/* -------------------------
   Buttons
   ------------------------- */

.fm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding-inline: var(--fm-space-5);

    border: 0;
    border-radius: var(--fm-radius-xs);

    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.fm-button--dark {
    background: var(--fm-color-ink);
    color: #fff;
}

.fm-button--dark:hover {
    background: #333;
    color: #fff;

    transform: translateY(-2px);
}

.fm-button--light {
    background: var(--fm-color-surface);
    color: var(--fm-color-ink);
}

.fm-button--light:hover {
    background: #fff;
    color: var(--fm-color-ink);

    transform: translateY(-2px);
}


/* -------------------------
   Structural rules
   ------------------------- */

.fm-rule {
    width: 100%;

    border: 0;
    border-top: var(--fm-border-default);
}

.fm-rule--dark {
    border-top: var(--fm-border-dark);
}


/* -------------------------
   Accessibility
   ------------------------- */

.fm-button:focus-visible,
.fm-text-link:focus-visible {
    outline: 2px solid var(--fm-color-ink);
    outline-offset: 4px;
}


/* -------------------------
   Mobile
   ------------------------- */

@media (max-width: 767px) {

    .fm-lead {
        font-size: var(--fm-text-base);
    }

}

/* =========================================================
   COMPONENT: EYEBROW
   ========================================================= */

.fm-eyebrow {
    margin: 0 0 var(--fm-space-5);

    color: var(--fm-color-muted);

    font-size: var(--fm-text-xs);
    font-weight: var(--fm-weight-bold);

    line-height: 1;
    letter-spacing: var(--fm-tracking-label);

    text-transform: uppercase;
}

.fm-eyebrow--light {
    color: var(--fm-color-on-dark-muted);
}


/* =========================================================
   COMPONENT: BUTTON
   ========================================================= */

.fm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--fm-space-3);

    min-height: 52px;

    padding-inline: var(--fm-space-5);

    border: 0;
    border-radius: var(--fm-radius-xs);

    font-size: var(--fm-text-sm);
    font-weight: var(--fm-weight-semibold);

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.fm-button--dark {
    background: var(--fm-color-ink);
    color: #fff;
}

.fm-button--dark:hover {
    background: #333;
    color: #fff;

    transform: translateY(-2px);
}

.fm-button--light {
    background: var(--fm-color-surface);
    color: var(--fm-color-ink);
}

.fm-button--light:hover {
    background: #fff;
    color: var(--fm-color-ink);

    transform: translateY(-2px);
}


/* =========================================================
   HEADER 01
   WordPress-generated mobile submenu
   ========================================================= */

.fm-mobile-menu .sub-menu {
    margin: 0;
    padding: 0 0 var(--fm-space-5);

    list-style: none;
}

.fm-mobile-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.fm-mobile-menu .sub-menu a {
    display: block;

    padding: var(--fm-space-2) 0;

    color: #999d99;

    font-size: var(--fm-text-sm);
    line-height: 1.4;

    text-decoration: none;
}

.fm-mobile-menu .sub-menu a:hover {
    color: #fff;
}