/* =========================================================
   MAMAHOOD — SYSTEM PAGES
   ========================================================= */
/*
 * Mechanical migration from the approved current Additional CSS.
 * No visual changes intended.
 */

/* =========================================================
   404 PAGE
   Kadence-generated 404 — exact markup confirmed in Safari.

   A tiny WordPress content hook replaces Kadence's default
   search form with the Mamahood 404 action links. These styles
   also keep the original search form presentable as a fallback
   if that hook is temporarily unavailable.
   ========================================================= */

/* Full 404 canvas */
body.error404 #primary,
body.error404 .content-area,
body.error404 .content-container,
body.error404 .site-main,
body.error404 .content-wrap,
body.error404 section.error {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #F0E5D9 !important;
}

body.error404 .content-container.site-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.error404 .site-main,
body.error404 .content-wrap,
body.error404 section.error {
    padding: 0 !important;
}

body.error404 section.error {
    padding: 72px 24px 78px !important;
}

/* Main 404 card */
body.error404 .page-content.entry.content-bg {
    width: min(900px, 100%) !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    background: #FFFFFF !important;
    border: 1px solid rgba(7, 53, 112, 0.10) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(7, 53, 112, 0.05) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.error404 .page-content.entry.content-bg > .entry-content-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 42px 44px 44px !important;
    box-sizing: border-box !important;
}

/* Mamahood eyebrow */
body.error404 .entry-content-wrap::before {
    content: "PAGE NOT FOUND";
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #F23883 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* Heading + body */
body.error404 .entry-content-wrap h1,
body.error404 .entry-content-wrap h2:first-of-type {
    margin: 0 0 20px 0 !important;
    padding: 0 !important;

    color: #073570 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
}

body.error404 .entry-content-wrap > p {
    margin: 0 0 26px 0 !important;
    padding: 0 !important;

    color: #073570 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
}

/* ---------------------------------------------------------
   CUSTOM 404 ACTIONS
   Added by the small WordPress 404 content hook.
   --------------------------------------------------------- */

body.error404 .mh-404-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.error404 .mh-404-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 22px !important;

    border-radius: 10px !important;
    box-sizing: border-box !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease !important;
}

body.error404 .mh-404-action-primary,
body.error404 .mh-404-action-primary:visited {
    background: #F23883 !important;
    color: #FFFFFF !important;
    border: 1px solid #F23883 !important;
}

body.error404 .mh-404-action-primary:hover,
body.error404 .mh-404-action-primary:focus {
    background: #C91F5A !important;
    color: #FFFFFF !important;
    border-color: #C91F5A !important;
    transform: translateY(-1px) !important;
}

body.error404 .mh-404-action-secondary,
body.error404 .mh-404-action-secondary:visited {
    background: #FFFFFF !important;
    color: #073570 !important;
    border: 1px solid rgba(7, 53, 112, 0.22) !important;
}

body.error404 .mh-404-action-secondary:hover,
body.error404 .mh-404-action-secondary:focus {
    background: #FFF8FB !important;
    color: #F23883 !important;
    border-color: rgba(242, 56, 131, 0.42) !important;
    transform: translateY(-1px) !important;
}

body.error404 .mh-404-help {
    margin: 22px 0 0 0 !important;
    padding: 18px 0 0 0 !important;

    color: #073570 !important;
    border-top: 1px solid rgba(7, 53, 112, 0.10) !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

body.error404 .mh-404-help a,
body.error404 .mh-404-help a:visited {
    color: #F23883 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ---------------------------------------------------------
   FALLBACK SEARCH FORM
   If Kadence's original search appears, keep it clean.
   The previous 38px button clipped the word "Search".
   --------------------------------------------------------- */

body.error404 .entry-content-wrap .search-form {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.error404 .entry-content-wrap .search-form label {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

body.error404 .entry-content-wrap .search-field {
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 108px 0 18px !important;

    background: #FFFDFB !important;
    color: #073570 !important;
    border: 1px solid rgba(7, 53, 112, 0.16) !important;
    border-radius: 12px !important;
    box-shadow: none !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

body.error404 .entry-content-wrap .search-field:focus {
    border-color: #F23883 !important;
    outline: 3px solid rgba(242, 56, 131, 0.12) !important;
    outline-offset: 0 !important;
}

body.error404 .entry-content-wrap .search-submit {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    transform: translateY(-50%) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 92px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;

    background: #F23883 !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;

    font-family: "DM Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body.error404 .entry-content-wrap .search-submit:hover,
body.error404 .entry-content-wrap .search-submit:focus {
    background: #C91F5A !important;
    color: #FFFFFF !important;
}


/* Keep the 404 search CTA text-only; Kadence adds a search icon by default. */
body.error404 .entry-content-wrap .search-submit svg,
body.error404 .entry-content-wrap .search-submit .kadence-svg-iconset,
body.error404 .entry-content-wrap .search-submit .search-icon {
    display: none !important;
}


/* ---------------------------------------------------------
   404 — TABLET
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

    body.error404 section.error {
        padding: 56px 28px 64px !important;
    }

    body.error404 .page-content.entry.content-bg > .entry-content-wrap {
        padding: 36px 36px 38px !important;
    }

    body.error404 .entry-content-wrap h1,
    body.error404 .entry-content-wrap h2:first-of-type {
        font-size: 40px !important;
    }

}


/* ---------------------------------------------------------
   404 — MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    body.error404 section.error {
        padding: 34px 16px 42px !important;
    }

    body.error404 .page-content.entry.content-bg {
        border-radius: 16px !important;
    }

    body.error404 .page-content.entry.content-bg > .entry-content-wrap {
        padding: 28px 22px 26px !important;
    }

    body.error404 .entry-content-wrap::before {
        margin-bottom: 12px !important;
        font-size: 11px !important;
    }

    body.error404 .entry-content-wrap h1,
    body.error404 .entry-content-wrap h2:first-of-type {
        margin-bottom: 18px !important;
        font-size: 34px !important;
        line-height: 1.12 !important;
    }

    body.error404 .entry-content-wrap > p {
        margin-bottom: 22px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    body.error404 .mh-404-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.error404 .mh-404-action {
        width: 100% !important;
        min-height: 48px !important;
    }

    body.error404 .mh-404-help {
        margin-top: 20px !important;
        padding-top: 16px !important;
        font-size: 13px !important;
    }

    body.error404 .entry-content-wrap .search-field {
        height: 50px !important;
        padding-left: 16px !important;
        padding-right: 98px !important;
        font-size: 14px !important;
    }

    body.error404 .entry-content-wrap .search-submit {
        width: 84px !important;
        height: 38px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 12px !important;
    }

}