/* Hooshkara Blog Styler 1.1.0 */

body.hk-blog-styler-active {
    --hk-heading: #000619;
    --hk-primary: #00C8D7;
    --hk-accent: #007C8D;
    --hk-text: #253746;
    --hk-muted: #71808C;
    --hk-border: #E3E9ED;
    --hk-soft: #F6F8FA;
    --hk-white: #FFFFFF;
    --hk-content: 880px;
    --hk-radius: 18px;
}

body.hk-blog-styler-active .hk-blog-main,
body.hk-blog-styler-active .hk-blog-main *:not(code):not(pre):not(kbd) {
    font-family: inherit;
}

.hk-blog-main {
    width: 100%;
    margin: 0;
    padding: 64px 20px 84px;
    direction: rtl;
    background: #fff;
}

.hk-single-post,
.hk-comments-wrap {
    width: min(100%, var(--hk-content));
    margin-inline: auto;
}

.hk-post-header {
    margin: 0 0 30px;
    text-align: right;
}

.hk-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 16px;
    color: var(--hk-muted);
    font-size: 14px;
    line-height: 1.7;
}

.hk-post-category {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 3px 11px;
    border: 1px solid rgba(0, 124, 141, .18);
    border-radius: 999px;
    color: var(--hk-accent) !important;
    background: rgba(0, 200, 215, .07);
    font-weight: 700;
    text-decoration: none !important;
}

.hk-post-date {
    color: var(--hk-muted);
}

.hk-post-title {
    max-width: 820px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--hk-heading) !important;
    font-size: clamp(30px, 4vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
    text-align: right;
}

.hk-featured-image {
    width: 100%;
    margin: 0 0 42px !important;
}

.hk-featured-image__img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 22px;
    box-shadow: 0 14px 38px rgba(0, 20, 38, .09);
}

.hk-article {
    width: 100%;
    color: var(--hk-text);
    direction: rtl;
    text-align: right;
    font-size: 17.5px;
    font-weight: 400;
    line-height: 2.05;
    overflow-wrap: break-word;
}

.hk-article > *:first-child {
    margin-top: 0 !important;
}

.hk-article > *:last-child {
    margin-bottom: 0 !important;
}

.hk-article p {
    margin: 0 0 22px !important;
    color: var(--hk-text);
    font-size: inherit;
    font-weight: 400;
    line-height: 2.05;
}

.hk-article > p:first-of-type,
.hk-article .hk-article-lead {
    margin-bottom: 28px !important;
    color: #344C5E;
    font-size: 18.5px;
    line-height: 2.05;
}

.hk-article h1,
.hk-article h2,
.hk-article h3,
.hk-article h4,
.hk-article h5,
.hk-article h6 {
    clear: both;
    color: var(--hk-heading) !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
    text-align: right;
}

.hk-article h1 {
    margin: 44px 0 18px !important;
    font-size: 30px !important;
    line-height: 1.7 !important;
}

.hk-article h2 {
    position: relative;
    margin: 48px 0 18px !important;
    padding: 0 17px 0 0 !important;
    font-size: 25px !important;
    line-height: 1.75 !important;
}

.hk-article h2::before {
    content: "";
    position: absolute;
    top: .42em;
    right: 0;
    width: 4px;
    height: 1.15em;
    border-radius: 999px;
    background: var(--hk-primary);
}

.hk-article h3 {
    margin: 34px 0 14px !important;
    font-size: 21px !important;
    line-height: 1.8 !important;
}

.hk-article h4 {
    margin: 30px 0 12px !important;
    font-size: 18.5px !important;
    line-height: 1.8 !important;
}

.hk-article a {
    color: var(--hk-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.hk-article a:hover,
.hk-article a:focus-visible {
    color: #005764;
}

.hk-article strong,
.hk-article b {
    color: #152A39;
    font-weight: 700;
}

.hk-article ul,
.hk-article ol {
    margin: 0 0 24px !important;
    padding: 0 25px 0 0 !important;
}

.hk-article li {
    margin: 7px 0;
    padding-right: 3px;
    line-height: 1.95;
}

.hk-article li::marker {
    color: var(--hk-accent);
    font-weight: 700;
}

.hk-article hr,
.hk-article .wp-block-separator {
    height: 1px;
    margin: 40px 0 !important;
    border: 0;
    background: var(--hk-border);
}

/* Inline and in-content media */
.hk-article img {
    max-width: 100%;
    height: auto;
}

.hk-article figure,
.hk-article .wp-block-image,
.hk-article .wp-block-gallery,
.hk-article .wp-block-video,
.hk-article .wp-block-embed {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
}

.hk-article figure img,
.hk-article .wp-block-image img,
.hk-article img.alignnone,
.hk-article img.aligncenter,
.hk-article img.alignwide,
.hk-article img.alignfull {
    display: block;
    margin-inline: auto;
    border-radius: var(--hk-radius);
    box-shadow: 0 10px 30px rgba(0, 20, 38, .075);
}

.hk-article .wp-element-caption,
.hk-article figcaption,
.hk-article .wp-caption-text {
    margin-top: 9px;
    color: var(--hk-muted);
    font-size: 13.5px;
    line-height: 1.8;
    text-align: center;
}

.hk-article iframe,
.hk-article video {
    max-width: 100%;
    border-radius: var(--hk-radius);
}

/* Quote */
.hk-article blockquote,
.hk-article .wp-block-quote {
    margin: 32px 0 !important;
    padding: 20px 22px !important;
    border: 0 !important;
    border-right: 4px solid var(--hk-primary) !important;
    border-radius: 0 15px 15px 0;
    background: #F4FAFB;
    color: #294252;
}

.hk-article blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* Tables */
.hk-article .wp-block-table,
.hk-article .hk-table-wrap {
    overflow-x: auto;
    margin: 32px 0 !important;
    border: 1px solid var(--hk-border);
    border-radius: 14px;
    background: #fff;
}

.hk-article table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    background: #fff;
    font-size: 15px;
    line-height: 1.85;
}

.hk-article th,
.hk-article td {
    padding: 13px 15px;
    border: 1px solid var(--hk-border);
    text-align: right;
    vertical-align: top;
}

.hk-article th {
    color: var(--hk-heading);
    background: #F1F7F8;
    font-weight: 700;
}

/* Code */
.hk-article code,
.hk-article kbd {
    direction: ltr;
    unicode-bidi: embed;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    font-size: .88em;
}

.hk-article :not(pre) > code {
    display: inline-block;
    padding: .08em .4em;
    border: 1px solid #C9EBEE;
    border-radius: 6px;
    color: #004D58;
    background: #EFF9FA;
}

.hk-article pre,
.hk-article .wp-block-code {
    overflow-x: auto;
    margin: 32px 0 !important;
    padding: 18px 20px !important;
    direction: ltr;
    border-radius: 14px;
    color: #E8F1F2;
    background: #071824;
    text-align: left;
    line-height: 1.75;
}

/* Information boxes */
.hk-info-box {
    margin: 32px 0;
    padding: 20px 22px;
    border: 1px solid #DCECEF;
    border-right: 4px solid var(--hk-primary);
    border-radius: 15px;
    background: #F8FBFC;
}

.hk-info-box--warning {
    border-right-color: #C78100;
    background: #FFF9EC;
}

.hk-info-box--success {
    border-right-color: #21835F;
    background: #F2FAF6;
}

.hk-info-box__title {
    display: block;
    margin-bottom: 7px;
    color: var(--hk-heading);
    font-size: 16px;
    font-weight: 700;
}

.hk-info-box__content > :last-child {
    margin-bottom: 0 !important;
}

/* FAQ shortcode */
.hk-faq {
    overflow: hidden;
    margin: 12px 0;
    border: 1px solid var(--hk-border);
    border-radius: 14px;
    background: #fff;
}

.hk-faq summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 15px 46px 15px 16px;
    color: var(--hk-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.9;
}

.hk-faq summary::-webkit-details-marker {
    display: none;
}

.hk-faq summary::before {
    content: "+";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    color: var(--hk-accent);
    background: #EAF8F9;
    line-height: 1;
}

.hk-faq[open] summary::before {
    content: "−";
}

.hk-faq__answer {
    padding: 0 16px 16px;
}

/* CTA */
/* A CTA is visible only when the article actually contains CTA content. */
.hk-article-cta:empty,
.hk-article-cta:not(:has(h1, h2, h3, h4, h5, h6, p:not(:empty), a[href], button, img, svg, ul li, ol li, .hk-article-cta__text:not(:empty), .hk-article-cta__button)) {
    display: none !important;
}

.hk-article-cta {
    overflow: hidden;
    margin: 40px 0;
    padding: 28px 30px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #000619, #005B68);
    box-shadow: 0 14px 36px rgba(0, 20, 38, .13);
}

.hk-article .hk-article-cta h2,
.hk-article .hk-article-cta h3,
.hk-article .hk-article-cta h4 {
    margin-top: 0 !important;
    padding-right: 0 !important;
    color: #fff !important;
}

.hk-article .hk-article-cta h2::before {
    display: none;
}

.hk-article-cta p,
.hk-article-cta__text {
    color: #E7F3F4 !important;
}

.hk-article-cta__text > :last-child {
    margin-bottom: 0 !important;
}

.hk-article-cta__action {
    margin: 16px 0 0 !important;
}

.hk-article-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 11px;
    color: #00151D !important;
    background: var(--hk-primary);
    font-weight: 700;
    text-decoration: none !important;
}

/* Tags */
.hk-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 46px;
    padding-top: 24px;
    border-top: 1px solid var(--hk-border);
}

.hk-post-tags a {
    padding: 5px 10px;
    border-radius: 9px;
    color: #526673;
    background: var(--hk-soft);
    font-size: 13px;
    text-decoration: none;
}

/* Comments */
.hk-comments-wrap {
    margin-top: 60px;
    padding-top: 36px;
    border-top: 1px solid var(--hk-border);
    direction: rtl;
    color: var(--hk-text);
}

.hk-comments-wrap .comments-title,
.hk-comments-wrap .comment-reply-title,
.hk-comments-wrap h2,
.hk-comments-wrap h3 {
    margin: 0 0 20px;
    color: var(--hk-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.8;
}

.hk-comments-wrap textarea,
.hk-comments-wrap input[type="text"],
.hk-comments-wrap input[type="email"],
.hk-comments-wrap input[type="url"] {
    width: 100%;
    border: 1px solid #D8E0E5;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.hk-comments-wrap textarea {
    min-height: 150px;
}

.hk-comments-wrap .submit,
.hk-comments-wrap input[type="submit"] {
    min-height: 44px;
    padding: 8px 20px;
    border: 0;
    border-radius: 10px;
    color: #00151D;
    background: var(--hk-primary);
    font-weight: 700;
}

@media (max-width: 767px) {
    .hk-blog-main {
        padding: 38px 16px 60px;
    }

    .hk-post-header {
        margin-bottom: 22px;
    }

    .hk-post-title {
        font-size: 29px !important;
        line-height: 1.65 !important;
    }

    .hk-featured-image {
        margin-bottom: 30px !important;
    }

    .hk-featured-image__img {
        border-radius: 15px;
    }

    .hk-article {
        font-size: 16.5px;
        line-height: 2;
    }

    .hk-article > p:first-of-type,
    .hk-article .hk-article-lead {
        font-size: 17px;
    }

    .hk-article h2 {
        margin-top: 38px !important;
        font-size: 22px !important;
    }

    .hk-article h3 {
        margin-top: 28px !important;
        font-size: 19px !important;
    }

    .hk-article figure,
    .hk-article .wp-block-image,
    .hk-article .wp-block-gallery,
    .hk-article .wp-block-video,
    .hk-article .wp-block-embed {
        margin-top: 28px !important;
        margin-bottom: 28px !important;
    }

    .hk-article-cta {
        padding: 22px 20px;
    }
}