/* ==========================================================
   WORDPRESS POST EDITOR STYLES
   Loaded only for post_type = "post"
   ========================================================== */


/* ----------------------------------------------------------
   EDITOR VARIABLES
   -.editor-styles-wrapper--------------------------------------------------------- */

.editor-styles-wrapper {
    --post-content-width: 820px;
    --post-wide-width: 1180px;

    --post-text: #202124;
    --post-muted: #5f6368;
    --post-border: #e4e6e8;
    --post-panel: #f5f6f8;

    --post-radius: 10px;

    color: var(--post-text);
    font-size: 17px;
    line-height: 1.65;

    padding: 50px 40px 100px;
}


/* ----------------------------------------------------------
   MAIN GUTENBERG CANVAS
   ---------------------------------------------------------- */

.editor-styles-wrapper .is-root-container {
    max-width: none;
}
.acf-block-preview .card{
  background: white;
}
.m-nav-card{
  width: 100%;
  max-width: 100%;
}

/*
 * Default content width.
 *
 * These are the normal article blocks that should remain
 * constrained to an easily readable width.
 */
.editor-styles-wrapper{
  font-family: arial,san-serif;
}
.editor-styles-wrapper .is-root-container > :where(
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    ol,
    blockquote,
    pre,
    table,
    .wp-block-image,
    .wp-block-quote,
    .wp-block-buttons
) {
    width: 100%;
    max-width: var(--post-content-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   WIDE BLOCKS
   ---------------------------------------------------------- */

.editor-styles-wrapper .is-root-container > :where(
    .alignwide,
    .wp-block-columns,
    .wp-block-cover,
    .wp-block-media-text
) {
    width: 100%;
    max-width: var(--post-wide-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}


/* Full-width blocks */

.editor-styles-wrapper .is-root-container > .alignfull {
    width: calc(100% + 80px);
    max-width: none;
    margin-left: -40px;
    margin-right: -40px;
}


/* ----------------------------------------------------------
   TYPOGRAPHY
   ---------------------------------------------------------- */

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    color: var(--post-text);
    font-weight: 700;
}


/* Post title inside Gutenberg */

.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .wp-block-post-title {
    max-width: var(--post-content-width);
    margin-left: auto;
    margin-right: auto;

    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 700;
}


/* H1 */

.editor-styles-wrapper h1 {
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.025em;

    margin-top: 0;
    margin-bottom: 22px;
}


/* H2 */

.editor-styles-wrapper h2 {
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.018em;

    margin-top: 50px;
    margin-bottom: 15px;
}


/* H3 */

.editor-styles-wrapper h3 {
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -0.01em;

    margin-top: 38px;
    margin-bottom: 12px;
}


/* H4 */

.editor-styles-wrapper h4 {
    font-size: 19px;
    line-height: 1.3;

    margin-top: 32px;
    margin-bottom: 10px;
}


/* ----------------------------------------------------------
   PARAGRAPHS
   ---------------------------------------------------------- */

.editor-styles-wrapper p {
    margin-top: 0;
    margin-bottom: 19px;
}


/*
 * Lead / intro paragraph
 *
 * Add:
 *
 * article-intro
 *
 * in Gutenberg:
 * Advanced > Additional CSS class(es)
 */

.editor-styles-wrapper .article-intro {
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.5;
    font-weight: 500;
    color: #343639;

    margin-top: 0;
    margin-bottom: 34px;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

.editor-styles-wrapper a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ----------------------------------------------------------
   LISTS
   ---------------------------------------------------------- */

.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
    padding-left: 1.5em;

    margin-top: 0;
    margin-bottom: 25px;
}


.editor-styles-wrapper li {
    margin-bottom: 7px;
}


.editor-styles-wrapper li:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   BLOCKQUOTE
   ---------------------------------------------------------- */

.editor-styles-wrapper blockquote,
.editor-styles-wrapper .wp-block-quote {
    border-left: 4px solid var(--post-text);

    padding: 8px 0 8px 25px;

    margin-top: 35px;
    margin-bottom: 35px;

    font-size: 21px;
    line-height: 1.5;
}


.editor-styles-wrapper blockquote p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   IMAGES
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-image {
    margin-top: 35px;
    margin-bottom: 35px;
}


.editor-styles-wrapper .wp-block-image img {
    display: block;

    max-width: 100%;
    height: auto;
}


/* Captions */

.editor-styles-wrapper .wp-element-caption,
.editor-styles-wrapper figcaption {
    color: var(--post-muted);

    font-size: 14px;
    line-height: 1.45;

    margin-top: 9px;
}


/* ----------------------------------------------------------
   ALIGN LEFT / RIGHT IMAGES
   ----------------------------------------------------------

   Still supports old-style floated images, but prevents them
   becoming enormous inside the editor.

   For substantial content/images, Columns are preferable.
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-image.alignleft {
    float: left;

    width: auto;
    max-width: 42%;

    margin:
        8px
        30px
        20px
        max(
            calc((100% - var(--post-content-width)) / 2),
            0px
        );
}


.editor-styles-wrapper .wp-block-image.alignright {
    float: right;

    width: auto;
    max-width: 42%;

    margin:
        8px
        max(
            calc((100% - var(--post-content-width)) / 2),
            0px
        )
        20px
        30px;
}


/* Clear floats after content */

.editor-styles-wrapper .is-root-container::after {
    display: table;
    clear: both;
    content: "";
}


/* ----------------------------------------------------------
   SEPARATORS
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-separator {
    width: 100%;
    max-width: var(--post-content-width);

    border: 0;
    border-top: 1px solid var(--post-border);

    margin: 50px auto;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-buttons {
    gap: 12px;

    margin-top: 25px;
    margin-bottom: 30px;
}


.editor-styles-wrapper .wp-block-button__link {
    border-radius: 5px;

    padding: 12px 20px;

    font-size: 16px;
    line-height: 1.3;

    text-decoration: none;
}


/* ==========================================================
   ARTICLE HERO
   ==========================================================

   Add class:

   article-hero

   to a Columns block.

   Recommended:

   Column 1:
       heading
       intro
       body

   Column 2:
       logo / image
   ========================================================== */

.editor-styles-wrapper .article-hero {
    width: 100%;
    max-width: var(--post-wide-width) !important;

    display: flex;

    gap: clamp(35px, 5vw, 80px);

    align-items: center !important;

    margin: 25px auto 60px !important;
}


.editor-styles-wrapper .article-hero > .wp-block-column:first-child {
    flex-basis: 67% !important;
}


.editor-styles-wrapper .article-hero > .wp-block-column:last-child {
    flex-basis: 33% !important;
}


.editor-styles-wrapper .article-hero h1,
.editor-styles-wrapper .article-hero h2,
.editor-styles-wrapper .article-hero h3 {
    margin-top: 0;
}


.editor-styles-wrapper .article-hero .wp-block-image {
    margin: 0;
}


.editor-styles-wrapper .article-hero .wp-block-image img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;
}


/* ==========================================================
   ARTICLE FEATURE
   ==========================================================

   Add class:

   article-feature

   to a Columns block.

   Useful for:

   [ IMAGE ] [ HEADING + COPY ]
   ========================================================== */

.editor-styles-wrapper .article-feature {
    width: 100%;
    max-width: var(--post-wide-width) !important;

    display: flex;

    gap: clamp(30px, 4vw, 60px);

    align-items: flex-start !important;

    margin: 50px auto !important;
}


.editor-styles-wrapper .article-feature > .wp-block-column:first-child {
    flex-basis: 38% !important;
}


.editor-styles-wrapper .article-feature > .wp-block-column:last-child {
    flex-basis: 62% !important;
}


.editor-styles-wrapper .article-feature .wp-block-image {
    margin: 0;
}


.editor-styles-wrapper .article-feature .wp-block-image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: var(--post-radius);
}


.editor-styles-wrapper .article-feature h2:first-child,
.editor-styles-wrapper .article-feature h3:first-child {
    margin-top: 0;
}


/* ==========================================================
   ARTICLE CALLOUT
   ==========================================================

   Add class:

   article-callout

   to a Group block.
   ========================================================== */

.editor-styles-wrapper .article-callout {
    width: 100%;
    max-width: var(--post-content-width);

    box-sizing: border-box;

    background: var(--post-panel);

    border-radius: var(--post-radius);

    padding: clamp(25px, 4vw, 40px);

    margin:
        40px
        auto !important;
}


.editor-styles-wrapper .article-callout > :first-child {
    margin-top: 0;
}


.editor-styles-wrapper .article-callout > :last-child {
    margin-bottom: 0;
}


.editor-styles-wrapper .article-callout h2,
.editor-styles-wrapper .article-callout h3 {
    margin-top: 0;
}


/*
 * Callout inside a feature column shouldn't be artificially
 * constrained to 820px because the column itself controls it.
 */

.editor-styles-wrapper .article-feature .article-callout {
    max-width: none;

    margin-top: 30px !important;
    margin-bottom: 0 !important;
}


/* ==========================================================
   ARTICLE WIDE SECTION
   ==========================================================

   Optional utility for Groups.

   Add:

   article-wide

   ========================================================== */

.editor-styles-wrapper .article-wide {
    width: 100%;
    max-width: var(--post-wide-width);

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ==========================================================
   CONTENT SECTION
   ==========================================================

   Optional utility for a Group that should always remain
   at normal reading width.

   Add:

   article-content

   ========================================================== */

.editor-styles-wrapper .article-content {
    width: 100%;
    max-width: var(--post-content-width);

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-table {
    margin-top: 30px;
    margin-bottom: 35px;

    overflow-x: auto;
}


.editor-styles-wrapper .wp-block-table table {
    width: 100%;

    border-collapse: collapse;
}


.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
    border: 1px solid var(--post-border);

    padding: 12px 14px;

    text-align: left;
    vertical-align: top;
}


.editor-styles-wrapper .wp-block-table th {
    font-weight: 700;
}


/* ----------------------------------------------------------
   EMBEDS
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-embed {
    width: 100%;
    max-width: var(--post-wide-width);

    margin: 40px auto;
}


/* ----------------------------------------------------------
   VIDEO
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-video {
    width: 100%;
    max-width: var(--post-wide-width);

    margin: 40px auto;
}


.editor-styles-wrapper .wp-block-video video {
    display: block;

    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   MEDIA + TEXT
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-media-text {
    gap: clamp(30px, 5vw, 60px);

    margin-top: 50px;
    margin-bottom: 50px;
}


/* ----------------------------------------------------------
   COLUMNS
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-columns {
    gap: clamp(25px, 4vw, 50px);
}


/*
 * Don't allow heading margins inside columns to become
 * excessively large at the very top.
 */

.editor-styles-wrapper
.wp-block-column
> :first-child {
    margin-top: 0;
}


.editor-styles-wrapper
.wp-block-column
> :last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   GROUPS
   ---------------------------------------------------------- */

.editor-styles-wrapper .wp-block-group {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   GUTENBERG BLOCK OUTLINES
   ----------------------------------------------------------

   Gives blocks just enough breathing room while editing,
   without changing their frontend appearance.
   ---------------------------------------------------------- */

.editor-styles-wrapper
.block-editor-block-list__block {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    .editor-styles-wrapper {
        padding-left: 30px;
        padding-right: 30px;
    }

    .editor-styles-wrapper .is-root-container > .alignfull {
        width: calc(100% + 60px);

        margin-left: -30px;
        margin-right: -30px;
    }

}


@media (max-width: 781px) {

    .editor-styles-wrapper {
        padding:
            35px
            20px
            80px;

        font-size: 16px;
    }


    .editor-styles-wrapper .is-root-container > .alignfull {
        width: calc(100% + 40px);

        margin-left: -20px;
        margin-right: -20px;
    }


    .editor-styles-wrapper h1 {
        font-size: 36px;
    }


    .editor-styles-wrapper h2 {
        font-size: 28px;

        margin-top: 38px;
    }


    .editor-styles-wrapper h3 {
        font-size: 22px;

        margin-top: 30px;
    }


    /*
     * Disable floats on narrow screens.
     */

    .editor-styles-wrapper .wp-block-image.alignleft,
    .editor-styles-wrapper .wp-block-image.alignright {
        float: none;

        width: 100%;
        max-width: var(--post-content-width);

        margin:
            30px
            auto;
    }


    /* Article hero */

    .editor-styles-wrapper .article-hero {
        flex-direction: column;

        gap: 30px;

        align-items: stretch !important;

        margin-bottom: 45px !important;
    }


    .editor-styles-wrapper
    .article-hero
    > .wp-block-column {
        flex-basis: 100% !important;
    }


    .editor-styles-wrapper
    .article-hero
    > .wp-block-column:last-child {
        width: 100%;
        max-width: 300px;
    }


    /* Article feature */

    .editor-styles-wrapper .article-feature {
        flex-direction: column;

        gap: 30px;

        margin:
            40px
            auto !important;
    }


    .editor-styles-wrapper
    .article-feature
    > .wp-block-column {
        flex-basis: 100% !important;
    }


    /* Media/text */

    .editor-styles-wrapper .wp-block-media-text {
        display: block;
    }


    .editor-styles-wrapper
    .wp-block-media-text
    .wp-block-media-text__content {
        padding:
            25px
            0
            0;
    }

}